9/28/2013 1 Tufte’s Design Principles CS 7450 - Information Visualization October 2, 2013 John Stasko Topic Notes Please see appropriate books for missing images Today’s Agenda Fall 2013 CS 7450 29/28/2013 2 Fall 2013 CS 7450 3 Graphical Excellence • Principles  Graphical excellence is the well-designed presentation of interesting data---a matter of substance, of statistics, and of design  Graphical excellence consists of complex ideas communicated with clarity, precision and efficiency According to Tufte Fall 2013 CS 7450 4 Graphical Excellence • Principles  Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space  Graphical excellence is nearly always multivariate  And graphical excellence requires telling the truth about the data9/28/2013 3 Fall 2013 CS 7450 5 Leveraging Human Capabilities • Data graphics should complement what humans do well “We thrive in information-thick worlds because of our marvelous and everyday capacities to select, edit, single out, focus, organize, condense, reduce, boil down, choose, categorize, catalog, classify, list, abstract, scan, look over, sort, integrate, blend, inspect, filter, lump, skip, smooth, chunk, average, approximate, cluster, aggregate, outline, summarize, itemize, review, dip into, flop through, browse, glance into, leaf through, skim, refine, enumerate, glean, synopsize, winnow the wheat from the chaff, and separate the sheep from the goats.” Vol.2, page 50 Fall 2013 CS 7450 6 Summary • 1. Tell the truth  Graphical integrity • 2. Do it effectively with clarity, precision…  Design aesthetics Let’s look at each of these9/28/2013 4 Fall 2013 CS 7450 7 1. Graphical Integrity • Your graphic should tell the truth about your data Fall 2013 CS 7450 8 Example 2002 2001 2000 1999 1998 500 475 450 Stock market crash?9/28/2013 5 Fall 2013 CS 7450 9 Example 2002 2001 2000 1999 1998 500 250 0 Show entire scale Fall 2013 CS 7450 10 Example 2000 1990 1980 1970 1960 500 250 0 Show in context9/28/2013 6 Fall 2013 CS 7450 11 Chart Integrity • Where’s baseline? • What’s scale? • What’s context? Fall 2013 CS 7450 12 Vol 1, p. 54 (1) Where’s 0? Note middle ‘709/28/2013 7 Fall 2013 CS 7450 13 Vol 1, p 54 (2) What’s being compared? Fall 2013 CS 7450 14 Vol 1, 57 Scale?9/28/2013 8 Fall 2013 CS 7450 15 Vol 1, p. 61 Scale? Fall 2013 CS 7450 16 Vol 1, p. 74 Great work!9/28/2013 9 Fall 2013 CS 7450 17 Vol 1, p. 74 Ahhhh Show the context Local Example Fall 2013 CS 7450 18 A huge rise? Atlanta Journal Constitution Summer ’089/28/2013 10 Fall 2013 CS 7450 19 Atlanta Journal Constitution Dec. ‘08 More of the data Fall 2013 CS 7450 20 Watch Size Coding • Height/width vs. area vs. volume9/28/2013 11 Fall 2013 CS 7450 21 Vol 1, p. 69 area = value? Fall 2013 CS 7450 22 Vol 1, p. 62 volume = value?9/28/2013 12 Fall 2013 CS 7450 23 Measuring Misrepresentation • Visual attribute value should be directly proportional to data attribute value Size of effect shown in graphic Size of effect in data Lie factor = 4280 454 9.4 = p.62 Fall 2013 CS 7450 24 2. Design Aesthetics • Set of principles to help guide designers9/28/2013 13 Fall 2013 CS 7450 25 Design Principles • Maximize data-ink ratio Data ink ratio = Data ink Total ink used in graphic = proportion of graphic’s ink devoted to the non-redundant display of data-information Fall 2013 CS 7450 26 Vol 1, p. 94 Good Bad9/28/2013 14 Fall 2013 CS 7450 27 Vol 1, p. 30 Outstanding Fall 2013 CS 7450 28 More... • Above all else, show the data • Maximize the data-ink ratio • Erase non-data-ink • Erase redundant data-ink • Revise and edit9/28/2013 15 Fall 2013 CS 7450 29 More... • Maximize data density data density of graphic = number of entries in data matrix area of data graphic Quote … Fall 2013 CS 7450 30 Maximize Data Density “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.” Vol 1, p 1689/28/2013 16 Fall 2013 CS 7450 31 Redesign charts • Bar chart, scatter plot, box plot Bar chart 0% 5% 10% 15% 20% 25% 30% 35% 40% 45% Fall 2013 32 CS 74509/28/2013 17 Bar chart 0% 5% 10% 15% 20% 25% 30% 35% 40% 45% Fall 2013 33 CS 7450 Bar chart 5% 15% 25% 35% 45% Fall 2013 34 CS 74509/28/2013 18 Bar chart 5% 15% 25% 35% Fall 2013 35 CS 7450 Bar chart 5% 15% 25% 35% Fall 2013 36 CS 74509/28/2013 19 Box plot Fall 2013 37 CS 7450 Box plot Fall 2013 38 CS 74509/28/2013 20 Box plot Fall 2013 39 CS 7450 Box plot Fall 2013 40 CS 74509/28/2013 21 Scatter plot Fall 2013 41 CS 7450 Scatter plot Fall 2013 42 CS 74509/28/2013 22 Scatter plot Fall 2013 43 CS 7450 Scatter plot Fall 2013 44 CS 74509/28/2013 23 Fall 2013 CS 7450 45 Design Principles • Avoid chartjunk  Extraneous visual elements that detract from message Fall 2013 CS 7450 46 Vol 1, p 1089/28/2013 24 Fall 2013 CS 7450 47 Vol 2, p.34 A classic Diamonds Were A Girl’s Best Friend Fall 2013 CS 7450 48 USA Today http://www.usatoday.com/news/snapshot.htm9/28/2013 25 Fall 2013 CS 7450 49 Junk Charts Blog http://junkcharts.typepad.com/ Fall 2013 CS 7450 50 More Thoughts Great narrative: Vol.2, bottom page 33-349/28/2013 26 Rethink That? Fall 2013 CS 7450 51 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 My take: It’s all about purpose Fall 2013 CS 7450 52 Design Principles • Utilize multifunctioning graphical elements (macro/micro readings)  Graphical elements that convey data information and a design function9/28/2013 27 Fall 2013 CS 7450 53 Vol 1, p 140 Fall 2013 CS 7450 54 Vol 1, p. 141 US Army Divisions going to France in WW I Leonard P. Ayres The War with Germany 19199/28/2013 28