visualizing tabular data cs 4390/5390 data visualization shirley moore, instructor september 29,...
TRANSCRIPT
![Page 1: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/1.jpg)
1
Visualizing Tabular Data
CS 4390/5390 Data VisualizationShirley Moore, Instructor
September 29, 2014
![Page 2: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/2.jpg)
2
Image Credits
• All images from Munzner Chapter 7 unless otherwise noted.
![Page 3: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/3.jpg)
3
Tabular Data
• Large classes of datasets can be characterized in the form of tables.– e.g., relational databases
• General form is a matrix of key attribute(s) in one or more dimensions and associated value attribute(s) in the remaining dimensions.
• May have linked tables where value attribute in one table is key attribute in another
• Layout and visualization of high dimensional tablular data is a challenging vis research problem.
![Page 4: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/4.jpg)
4
Using the Spatial Channel
![Page 5: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/5.jpg)
5
Key vs. Value Attributes• Key
– Unique index used to look up items in a table– Can be categorical or ordinal
• ValueThe value of a cell in a table– Can be categorical, ordinal, or quantitative
• Design choices for visually encoding a table depend on how many keys and how many attributes it has– Show only values: scatterplot– Show one key and one value: bar chart– Show two keys and one value: heat map– Show many keys and many values: recursively divide subspace into
many regions
![Page 6: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/6.jpg)
6
Scatterplot
![Page 7: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/7.jpg)
7Image credit: http://en.wikipedia.org/wiki/Scatter_plot
![Page 8: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/8.jpg)
8
Scatterplot with Negative Correlation
Image credit: https://onlinecourses.science.psu.edu/stat414/book/export/html/262
![Page 9: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/9.jpg)
9
Scatterplot with Log Scaling
![Page 10: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/10.jpg)
10
Bar Chart
![Page 11: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/11.jpg)
11
Pie Chart
![Page 12: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/12.jpg)
12
Bar and Pie Chart Examples
• Bar chart– http://bl.ocks.org/mbostock/3885705
• Pie chart– D3pie pie chart generator
![Page 13: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/13.jpg)
13
Stacked Bar Chart
![Page 14: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/14.jpg)
14
Stacked Bar Chart vs.Grouped Bar Chart
• Stacked bar chart example:– http://bl.ocks.org/mbostock/3886208
• Grouped bar chart example:– http://bl.ocks.org/mbostock/3887051
![Page 15: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/15.jpg)
15
Line Chart
![Page 16: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/16.jpg)
16
Don’t use line chart for categorical data!
![Page 17: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/17.jpg)
17
Time Series Data – Area Chart vs. Lines Chart
• Exercise: In less than one minute, draw the line showing the sales trend for East from the area chart on the next slide (image from http://vizwiz.blogspot.com/2012/10/stacked-area-chart-vs-line-chart-great.html ):
![Page 18: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/18.jpg)
18
![Page 19: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/19.jpg)
19
East Sales Trend – How close were you?
![Page 20: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/20.jpg)
20
Lines with Total
![Page 21: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/21.jpg)
21
Normalized Stacked Bar Chart
Example: http://bl.ocks.org/mbostock/3886394
![Page 22: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/22.jpg)
22
Streamgraph
Mathematical algorithms minimize change in slope (“wiggle”) in individual series.
![Page 23: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/23.jpg)
23
Streamgraph Examples
• Original paper by Byron and Wattenberg with Listening History example– http://www.leebyron.com/else/streamgraph/
• Movie Box Office Receipts NYTimes article– http://www.nytimes.com/interactive/2008/02/23/
movies/20080223_REVENUE_GRAPHIC.html
• Article discussing streamgraphs– http://www.visualisingdata.com/index.php/2010/
08/making-sense-of-streamgraphs/
![Page 24: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/24.jpg)
24
Heatmap
![Page 25: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/25.jpg)
25
Heatmap with Hierarchical Clustering of Key Attributes
![Page 26: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/26.jpg)
26
Circular Heatmap Example
• http://prcweb.co.uk/circularheatchart/
![Page 27: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/27.jpg)
27
Scatterplot Matrix (SPLOM)
D3.js SPLOM example: http://mbostock.github.io/d3/talk/20111116/iris-splom.html
![Page 28: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/28.jpg)
28
Parallel Coordinates
![Page 29: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/29.jpg)
29
SPLOM vs. Parallel Coordinates
![Page 30: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/30.jpg)
30
Correlation with Parallel Coordinates
![Page 31: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/31.jpg)
31
Parallel Coordinates Examples
• With brush filtering and reorderable axes– http://bl.ocks.org/jasondavies/1341281
• With k-means clustering (from Wikipedia):
![Page 32: Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1](https://reader036.vdocuments.mx/reader036/viewer/2022062422/56649f115503460f94c24b84/html5/thumbnails/32.jpg)
32
Preparation for Next Class
• Read Munzner Chapter 7• Scott Murray’s D3 Tutorial– http://alignedleft.com/tutorials/d3/
• Bring in interesting high-dimensional tabular datasets (can use for Lab 3)