1. Visualizing Tabular Data CS 4390/5390 Data Visualization Shirley Moore, Instructor September 29, 2014 1

2. Image Credits All images from Munzner Chapter 7 unless otherwise noted. 2

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. 3

4. Using the Spatial Channel 4

5. Key vs. Value Attributes Key – Unique index used to look up items in a table – Can be categorical or ordinal Value The 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 5

6. Scatterplot 6

7. 7 Image credit: http://en.wikipedia.org/wiki/Scatter_plothttp://en.wikipedia.org/wiki/Scatter_plot

8. Scatterplot with Negative Correlation 8 Image credit: https://onlinecourses.science.psu.edu/stat414/book/export/html/262https://onlinecourses.science.psu.edu/stat414/book/export/html/262

9. Scatterplot with Log Scaling 9

10. Bar Chart 10

11. Pie Chart 11

12. Bar and Pie Chart Examples Bar chart – http://bl.ocks.org/mbostock/3885705 http://bl.ocks.org/mbostock/3885705 Pie chart – D3pie pie chart generator D3pie 12

13. Stacked Bar Chart 13

14. Stacked Bar Chart vs. Grouped Bar Chart Stacked bar chart example: – http://bl.ocks.org/mbostock/3886208 http://bl.ocks.org/mbostock/3886208 Grouped bar chart example: – http://bl.ocks.org/mbostock/3887051 http://bl.ocks.org/mbostock/3887051 14

15. Line Chart 15

16. Don’t use line chart for categorical data! 16

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 ): http://vizwiz.blogspot.com/2012/10/stacked- area-chart-vs-line-chart-great.html 17

18. 18

19. East Sales Trend – How close were you? 19

20. Lines with Total 20

21. Normalized Stacked Bar Chart 21 Example: http://bl.ocks.org/mbostock/3886394http://bl.ocks.org/mbostock/3886394

22. Streamgraph 22 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/ 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 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/ http://www.visualisingdata.com/index.php/2010/ 08/making-sense-of-streamgraphs/ 23

24. Heatmap 24

25. Heatmap with Hierarchical Clustering of Key Attributes 25

26. Circular Heatmap Example http://prcweb.co.uk/circularheatchart/ 26

27. Scatterplot Matrix (SPLOM) 27 D3.js SPLOM example: http://mbostock.github.io/d3/talk/20111116/iris- splom.html

28. Parallel Coordinates 28

29. SPLOM vs. Parallel Coordinates 29

30. Correlation with Parallel Coordinates 30

31. Parallel Coordinates Examples With brush filtering and reorderable axes – http://bl.ocks.org/jasondavies/1341281 With k-means clustering (from Wikipedia): 31

32. Preparation for Next Class Read Munzner Chapter 7 Scott Murray’s D3 Tutorial – http://alignedleft.com/tutorials/d3/ http://alignedleft.com/tutorials/d3/ Bring in interesting high-dimensional tabular datasets (can use for Lab 3) 32