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)