Outline. Design Principles and Graph Types. CS 795/895 Information Visualization Fall Dr. Michele C. Weigle

Transcription

1 CS 795/895 Information Visualization Fall 2012 Design Principles and Graph Types Dr. Michele C. Weigle Outline! Tables! Graph Basics! Design Principles! Graph Types! Graphical Integrity! Resources! Few, Show Me the Numbers!! Tufte, The Visual Display of Quantitative Information! Visualize This, Chs 5-6! John Stasko's CS GaTech, Spring

2 Tables vs. Graphs! Tables! Used to look up individual values! Used to compare individual values! Precise values are required! The quantitative info to be communicated involves more than one unit of measure! Graphs! Message is contained in the shape of the values! Used to reveal relationships among multiple values 3 S. Few, Show Me the Numbers Effective Table Design! See Chapter 8 in Show Me the Numbers! Appendix A (handout)! Proper and effective use of layout, typography, shading, etc. can go a long way! Tables may be underused 4 Stasko, GaTech 2011

3 Tables Examples Few, Save the Pies for Dessert, 5 Few, Effectively Communicating Numbers, Outline! Tables! Graph Basics! Design Principles! Graph Types! Graphical Integrity 6

4 Graph Basics! Must keep the task in mind! why do you need a graph?! what questions are being answered?! what data is needed to answer those questions?! who is the audience? 7 Stasko, GaTech 2011 Graph Basics Graph Components! Framework! Measurement types, scale! Content! Marks, lines, points! Labels! Title, axes, ticks 8 Stasko, GaTech 2011

5 Graph Basics Graphical Properties of Structures! Size, shape, color, orientation 9 Stasko, GaTech 2011 Graph Basics Back to Data! What were the different types of data sets?! Number of variables per class! 1 - Univariate data! 2 - Bivariate data! 3 - Trivariate data! >3 - Hypervariate data 10 Stasko, GaTech 2011

6 Graph Basics Univariate Data 11 Stasko, GaTech 2011 Graph Basics What Goes Where! In univariate representations, we often think of the data case as being shown along one dimension, and the value in another 12 Stasko, GaTech 2011

7 Graph Basics Alternate View! We may think of a graph as representing independent (data case) and dependent (value) variables! Guideline:! Independent vs. dependent variables! Put independent on x-axis! See resultant dependent variables along y-axis 13 Stasko, GaTech 2011 Graph Basics Bivariate Data 14 Stasko, GaTech 2011

8 Graph Basics Trivariate Data! Is this easy to understand? 15 Stasko, GaTech 2011 Graph Basics Trivariate - Alternative Representation! Still use 2D but have mark property (size, color, etc.) represent third variable 16 Stasko, GaTech 2011

9 Graph Basics Trivariate - Alternative Representation! Represent each variable in its own explicit way 17 Stasko, GaTech 2011 Graph Basics Hypervariate Data! The tough one! Number of well-known visualization techniques exist for data sets of 1-3 dimensions! line graphs, bar graphs, scatter plots! We see a 3-D world (4-D with time)! What about data sets with more than 3 variables?! Often the interesting, challenging ones 18 Stasko, GaTech 2011

10 Graph Basics Multiple Views! Give each variable its own display 19 Stasko, GaTech 2011 Graph Basics Scatterplot Matrix! Represent each possible pair of variables in their own 2D scatterplot! Useful for what?! Misses what? 20 Stasko, GaTech 2011

11 e e forcible_rape robbery 400 burglary 3000 larceny_theft 800 for each case (each state and US), 8 variables aggravated_assault 1500! Use crime data! 50 Scatterplot Matrix in R Implementation Time murder 3.5e+07 population e e e+00 Filter out DC and US averages! 200 motor_vehicle_theft robbery plot (crime2[,2:9]) aggravated_assault larceny_theft 800 motor_vehicle_theft 200 plot (crime2[,2:9], panel=panel.smooth) 3.5e+07! burglary 1500 Add fitted LOESS curve! ! forcible_rape 400 Use plot command to show data in all columns! 2 murder 0.0e+00 population 21 2 Outline! Tables! Graph Basics! Design Principles! Graph Types! Graphical Integrity Yau, Visualize This, Ch 6 (pp )

12 Design Principles Basic Principles! Highlight the data! Above else, show the data -Tufte! Organize the data! Reduce the non-data ink! Would the data suffer loss of meaning or impact if this was eliminated?! Enhance the data ink! Revise and edit 23 S. Few, Show Me the Numbers Design Principles Data-Ink Ratio! Maximize data-ink ratio! Data-ink ratio! Data ink / Total ink used in graphic! proportion of graphic's ink devoted to the nonredundant display of data-information! Examples - p. 94! top figure - good! bottom figure - bad! Another example - p. 30! NYC Weather - we saw this on day 1 24 Tufte, The Visual Display of Quantitative Information

13 Design Principles! Maximize data density! number of entries in data matrix / area of data graphic 25 Tufte, The Visual Display of Quantitative Information Maximize Data Density p. 166 "Data-rich designs give a context and credibility to statistical evidence. Low-information designs are suspect: what is left out, what is hidden, why are we shown so little? High-density graphics help us to compare parts of the data by displaying much information within the view of the eye: we look at one page at a time and the more on the page, the more effective and comparative our eye can be. The principle, then, is: Maximize data density and the size of the data matrix, within reason. 26 Tufte, The Visual Display of Quantitative Information

14 Design Principles! Avoid chartjunk! Extraneous visual elements that detract from message! Example - p. 118! worst graphic ever? 27 Tufte, The Visual Display of Quantitative Information Chartjunk USA Today 28

15 Chartjunk Rethink That? Bateman et al. CHI 2010! Compared plain charts to "embellished" charts! Found that the embellished charts were just as good on interpretation accuracy and were recalled better weeks later! Participants also preferred the embellished ones! Some caveats:! Very simple data! Very plain plain charts! Each chart/data is different 29 Chartjunk Rethink That? Hullman et al. InfoVis 2011! Benefitting InfoVis with Visual Difficulties! Non-efficient visual elements may benefit comprehension and recall on the part of users.! Introducing cognitive difficulties to visualization interaction can improve a user's understanding of important information! Paper generated a little bit of pushback from Stephen Few! visual_business_intelligence/visual_difficulties.pdf! challenges those guidelines based solely on an illusion of evidence and credible research, which dissolves into an ephemeral mist upon examination.! Is there common ground?! 30

16 Design Principles Few's Selection and Design Process! What's the message? What's the data?! must know what's important before trying to communicate! Table, graph, or both?! see Few handout (pg. 239)! Best means to encode the values?! see Few handout (pg. 240) 31 S. Few, Effectively Communicating Numbers Few's Selection and Design Process How to Encode Values! Points! Useful in scatterplots for 2-values! Can replace bars when scale doesn't start at 0! Lines! Connect values in a series! Show changes, trends, patterns! Not for a set of nominal or ordinal values! Bars! Emphasizes individual values! Good for comparing individual values! Boxes! Shows a distribution of values 32 Stasko, GaTech 2011

17 How to Encode Values Encoding Quantitative Values! Two most powerful attributes for encoding quantitative values! line length! 2D position! These are better than color, shape, size! we can tell easily that these are different, but it's hard to tell by how much! In particular, it's hard to compare 2D areas! so avoid pie charts! 33 S. Few, Effectively Communicating Numbers Design Principles Few's Selection and Design Process! Where to display each variable?! vertical vs. horizontal bars! multiple bars! small multiples 34 S. Few, Effectively Communicating Numbers

18 Where to Display Values Vertical vs. Horizontal Bars! Horizontal can be good if long text labels or many items 35 Where to Display Values Multiple Bars! Can be used to encode another variable 36

19 Where to Display Values Small Multiples! Can distribute a variable across graphs! Sometimes called a trellis display or small multiples 37 Design Principles! Use small multiples! Repeat visually similar graphical elements nearby rather than spreading far apart! Example - p. 168! 23 hours of LA air pollution 38 Tufte, The Visual Display of Quantitative Information

20 Few's Selection and Design Process Best Design for the Remaining Objects! Range of the quantitative scale?! bars - start from 0! lines, points - adjust scale so that it extends a little below the lowest data value and a little above the highest! bars - if you want to narrow the scale, switch from bars to points! If a legend is required, where to place it?! the more directly you label the data, the better! bar - arrange labels to match the arrangement of bars! Tick marks required for axis?! only necessary on quantitative scales! only major tick marks are necessary (5-10 usually enough) 39 S. Few, Effectively Communicating Numbers Few's Selection and Design Process Best Design for the Remaining Objects! Best location for the quantitative scale?! avoid placing scale on right side unless necessary! if quantitative scale ranges between positive and negative, place axis at 0 (but don't let labels interfere with data)! Grid lines required?! values cannot be interpreted with the necessary degree of accuracy! subset of points in multiple related scatter plots must be compared! if used, make them barely visible! What descriptive text is needed?! title! axes titles 40 S. Few, Effectively Communicating Numbers

21 Axis Labels My Pet Peeve 41 Design Principles Few's Selection and Design Process! Should particular data be featured, and if so, how?! use bright or dark colors (when using soft colors for everything else)! bars - place borders around only those bars that should be highlighted! lines - make lines to be highlighted thicker! points - make featured points larger or include fill color in them alone 42 S. Few, Effectively Communicating Numbers

22 Design Principles Other Issues! Reference Lines! Now You See It, pgs ! Overplotting! too many data points! Now You See It, pg. 118! Narrative! Content is King 43 Design Principles Overplotting Solutions! Reducing size of data objects! Removing all fill color from data objects! Changing the shape of data objects! Jittering data objects! Making data objects transparent! Encoding the density of values! Reducing the number of values! Aggregating the data! Filtering the data! Breaking the data into a series of separate graphs! Statistically sampling the data 44

23 Design Principles Narrative! Show mechanism, process, dynamics, and causality! cause and effect are key! make graphic exhibit causality! Utilize narratives of space and time! tell a story of position and chronology through visual elements! We'll see more of this later - storytelling and data journalism 45 Tufte, The Visual Display of Quantitative Information Design Principles Content Is King! Quality, relevance and integrity of the content is fundamental! What's the analysis task? Make the visual design reflect that! Integrate text, chart, graphic, map into a coherent narrative 46 Stasko, GaTech 2011

24 Design Principles Example and Challenge - Government Data 47 Outline! Tables! Graph Basics! Design Principles! Graph Types! Graphical Integrity 48

25 Graph Types! Multiple Variables! Time Series Data! Part-to-Whole Relationships! Deviation Analysis! Distribution Analysis! Correlation Analysis! Two Interesting Graph Types 49 Multiple Variables Trellis Display! Multiple graphs that typically vary on one variable! Arrange in order of magnitude, not alphabetically or arbitrarily! pgs

26 Multiple Variables Crosstab! Varies across more than one variable! pgs Multiple Variables Multiple Concurrent Views! Vintage infovis! p. 107! Few calls such things faceted analytical displays as opposed to dashboards! for monitoring, not analysis! Note: This visualization was done in Tableau 52

27 Time Series Data! Patterns to be shown! Trend! Variability! Rate of change! Co-variation! Cycles! Exceptions 53 Time Series Data Line Graphs! p. 151! When to use:! When quantitative values change during a continuous period of time 54

28 Time Series Data Bar Graphs! p. 152! When to use:! When you want to support the comparison of individual values 55 Time Series Data Data Plots! p. 153! When to use:! When analyzing values that are spaced at irregular intervals of time 56

29 Time Series Data Radar Graphs! p. 154! When to use:! When you want to represent data across the cyclical nature of time 57 Time Series Data Heatmaps! p. 157! When to use:! When you want to display a large quantity of cyclical data (too much for radar)! Black should not be used as a middle value because of its saliency (visual prominence)! Some people are red-green color blind too 58

30 Time Series Data Box Plots! p. 157! bottom of box - 25 th percentile (1 st quartile)! top of box - 75 th percentile (3 rd quartile)! band inside box - mean! When to use:! You want to show how values are distributed across a range and how that distribution changes over time 59 Implementation Time Box Plots in R! boxplot() function! whiskers IQR (inter-quartile range)! dots - high or low values outside 1.5 IQR! Example using built-in data OrchardSprays > OrchardSprays decrease rowpos colpos treatment D E boxplot(decrease ~ treatment, data = OrchardSprays, log = "y", col = "bisque") A B C D E F G H 60

31 Time Series Data Animated Scatterplots! ala Hans Rosling! p. 159! When to use:! To compare how two quantitative variables change over time 61 Time Series Data Banking to 45! p ! Same diagram, just drawn at different aspect ratios! People interpret the diagrams better when lines are around 45, not too flat, not too steep 62

32 Time Series Data Question! p. 172! Which is increasing at a faster rate, hardware sales or software sales?! Both at same rate, 10%! Log scale shows this 63 Time Series Data Patterns! p. 176! Daily sales! Average per day 64

33 Time Series Data Cycle Plot! p. 177! Combines visualizations from two prior graphs 65 Part-to-Whole Relationships! pgs ! How much wine of different varieties is produced?! Bar graphs are much more effective than pie charts for analyzing ranking and part-to-whole relationships 66

34 Implementation Time Pie Charts in Protovis var data = [172, 136, 135, 101, 80, 68, 50, 29, 19, 41]; a = pv.scale.linear(0, pv.sum(data)).range(0, 2*Math.PI); vis.add(pv.wedge).data(data).bottom(w/2).left(w/2).outerradius(r).angle(a) 67 Yau, Visualize This, Ch 5 (pp ) Implementation Time Stacked Bar Charts in Protovis var data = { "Issue":["Race Relations", Education", "Terrorism", "Energy Policy", "Foreign Affairs", "Environment", "Situation in Iraq", "Taxes", "Healthcare Policy", "Economy", "Situation in Afghanistan", "Federal Budget Deficit", "Immigration"], "Approve":[52,49,48,47,44,43,41,41,40,38,36,31,29], "Disapprove":[38,40,45,42,48,51,53,54,57,59,57,64,62], "None":[10,11,7,11,8,6,6,5,3,3,7,5,9] }; var bar = vis.add(pv.layout.stack).layers(data).x(function() x(this.index)).y(function(d) y(d)).layer.add(pv.bar).fillstyle(function() fill[this.parent.index]).width(x.range().band); 68 Yau, Visualize This, Ch 5 (pp )

35 Part-to-Whole Relationships Pareto Chart! p. 194! Shows individual contributors and increasing total! 80/20 rule! 80% of effect comes from 20% 69 Deviation Analysis! p. 203! Do you show the two values in question or the difference of the two? 70

36 Distribution Analysis Views! Histogram! Frequency polygon! Strip plot! Stem-and-leaf plot 71 Distribution Analysis Histogram! p

37 Implementation Time Histogram in R! Use birth rate data! for each case (each country), birth rates ! Grab only 2008 data! row X2008! Use hist command! hist(birth$x2008)! Add more bins! hist(birth$x2008, breaks=20) 73 Frequency Histogram of birth$x birth$x2008 Frequency Histogram of birth$x birth$x2008 Yau, Visualize This, Ch 6 (pp ) Distribution Analysis Frequency Polygon! Line used to display a distribution! p

38 Implementation Time Density in R! Use birth rate data density.default(x = birth2008)! Clean data for 2008 (remove values with NA)! data can't have missing values for density computation! Use density command to compute stats! d2008 <- density(birth2008) Density ! Use plot command! plot (d2008) N = 219 Bandwidth = Yau, Visualize This, Ch 6 (pp ) Distribution Analysis Strip Plot! Display each individual value in a distribution, laid out on a single line! p

39 Distribution Analysis Stem-and-Leaf Plot! Invented by John Tukey! Combines summary and detail information in a single display! Digits to the left of the line are stem, digits to the right of the line are leaf! p Implementation Time Stem and Leaf Plot in R! Use birth rate data! Grab only 2008 data 78! row X2008! Use stem command! stem (birth$x2008) The decimal point is at the Example using Protovis: Yau, Visualize This, Ch 6 (pp )

40 Distribution Analysis Comparisons! p. 234! Note how first one's curve is smooth (not such a noticeable difference). Second one is more noticeable. Same data. 79 Correlation Analysis! p. 276! How can we clean this up? 80

41 Correlation Analysis Crosstab! p Two Interesting Graph Types Use Data to Form Graph Elements! Utilize multifunctioning graphical elements (macro/micro readings)! Graphical elements that convey data information and a design function! Example - p. 141! US Army Divisions going to France in WW I! Leonard P. Ayres, The War with Germany, Tufte, The Visual Display of Quantitative Information

42 Two Interesting Graph Types Sparklines! Small, repeated graphics (frequently line graphs)! examples: p. 171! jquerysparklines 83 Tufte, The Visual Display of Quantitative Information For Fun! 45 Ways to Communicate Two Quantities: 75 and 37! 84

43 Outline! Tables! Graph Basics! Design Principles! Graph Types! Graphical Integrity 85 Graphical Integrity! Tufte is very big on graphical integrity! Your graphic should tell the truth about your data 86 Tufte, The Visual Display of Quantitative Information

44 Example Stock Market Crash? 87 Stasko, GaTech 2011 Example Show Entire Scale 88 Stasko, GaTech 2011

45 Example Show in context 89 Stasko, GaTech 2011 Graphical Integrity! Where's the baseline?! What's the scale?! What's the context? 90 Tufte, The Visual Display of Quantitative Information

46 Graphical Integrity Visual Display, p. 57! Scale? 91 Tufte, The Visual Display of Quantitative Information Graphical Integrity Visual Display, p top figure! Great work! 92 Tufte, The Visual Display of Quantitative Information

47 Graphical Integrity Visual Display, p bottom figure! Ahhhhh! Show the context 93 Tufte, The Visual Display of Quantitative Information Graphical Integrity Picking on Fox News! Someone has trouble with graphical integrity

48 Graphical Integrity Watch Size Coding! Height/width vs. area vs. volume! Example - p. 62 top! Volume = value? 95 Tufte, The Visual Display of Quantitative Information Graphical Integrity Measuring Misrepresentation! Visual attribute value should be directly proportional to data attribute value! Lie factor = Size of effect shown in graphic / Size of effect in data! pg top figure! 9.4 = 4280 / Tufte, The Visual Display of Quantitative Information

49 Outline! Tables! Graph Basics! Design Principles! Graph Types! Graphical Integrity! Wrapping Up 97 Guides for Enhancing Visual Quality! Attractive displays of statistical info! have a properly chosen format and design! use words, numbers and drawing together! reflect a balance, a proportion, a sense of relevant scale! display an accessible complexity of detail! often have a narrative quality, a story to tell about the data! are drawn in a professional manner, with the technical details of production done with care! avoid content-free decoration, including chartjunk 98 Stasko, GaTech 2011

50 Information Overload What about confusing clutter? Information overload? Doesn't data have to "boiled down" and "simplified"? These common questions miss the point, for the quantity of detail is an issue completely separate from the difficultly of reading. Clutter and confusion are failures of design, not attributes of information. Often the less complex and less subtle the line, the more ambiguous and less interesting is the reading. Stripping the detail out of data is a style based on personal preference and fashion, considerations utterly indifferent to substantive content. Tufte, Envisioning Information, p Stasko, GaTech 2011 Graphical Displays Should! Show the data! Induce the viewer to think about substance rather than about methodology, graphic design the technology of graphic production, or something else! Avoid distorting what the data have to say! Present many numbers in a small space! Make large data sets coherent! Encourage the eye to compare different pieces of data! Reveal the data at several levels of detail, from a broad overview to the fine structure! Serve a reasonably clear purpose: description, exploration, tabulation, or decoration! Be closely integrated with statistical and verbal descriptions of a data set 100 Stasko, GaTech 2011

51 Poor Graphs Can Be Transformed! Parliament Guide to Statistical Charts! SN05073.pdf! pg. 1 - before after (w/excel defaults)! Graph Design for Effective Communication, S. Few! %20for%20Effective%20Communication.pdf! Slides Outline! Tables! Graph Basics! Design Principles! Graph Types Next Up: Data (Formats, Gathering, Cleaning, Linking) Reading: Visualize This, Ch 2! Graphical Integrity! Wrapping Up 102