1
Visualizing Tabular Data
CS 4390/5390 Data VisualizationShirley Moore, Instructor
September 29, 2014
2
Image Credits
• All images from Munzner Chapter 7 unless otherwise noted.
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.
4
Using the Spatial Channel
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
6
Scatterplot
7Image credit: http://en.wikipedia.org/wiki/Scatter_plot
8
Scatterplot with Negative Correlation
Image credit: https://onlinecourses.science.psu.edu/stat414/book/export/html/262
9
Scatterplot with Log Scaling
10
Bar Chart
11
Pie Chart
12
Bar and Pie Chart Examples
• Bar chart– http://bl.ocks.org/mbostock/3885705
• Pie chart– D3pie pie chart generator
13
Stacked Bar Chart
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
15
Line Chart
16
Don’t use line chart for categorical data!
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 ):
18
19
East Sales Trend – How close were you?
20
Lines with Total
21
Normalized Stacked Bar Chart
Example: http://bl.ocks.org/mbostock/3886394
22
Streamgraph
Mathematical algorithms minimize change in slope (“wiggle”) in individual series.
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/
24
Heatmap
25
Heatmap with Hierarchical Clustering of Key Attributes
26
Circular Heatmap Example
• http://prcweb.co.uk/circularheatchart/
27
Scatterplot Matrix (SPLOM)
D3.js SPLOM example: http://mbostock.github.io/d3/talk/20111116/iris-splom.html
28
Parallel Coordinates
29
SPLOM vs. Parallel Coordinates
30
Correlation with Parallel Coordinates
31
Parallel Coordinates Examples
• With brush filtering and reorderable axes– http://bl.ocks.org/jasondavies/1341281
• With k-means clustering (from Wikipedia):
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)