GT CS 7450 - Tufte’s Design Principles

Unformatted text preview:

2/23/20091Tufte’s Design Principles CS 4460/7450 - Information VisualizationFebruary 17, 2009John StaskoToday’s AgendaSpring 2009 CS 4460/7450 22/23/20092Spring 2009 CS 4460/7450 3Envisioning Information• Let’s hear your views on the book...Spring 2009 CS 4460/7450 4Graphical 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 efficiencyAccording to Tufte2/23/20093Spring 2009 CS 4460/7450 5Graphical 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 dataSpring 2009 CS 4460/7450 6Leveraging 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 502/23/20094Spring 2009 CS 4460/7450 7Summary• 1. Tell the truth− Graphical integrity• 2. Do it effectively with clarity, precision…− Design aestheticsLet’s look at each of theseSpring 2009 CS 4460/7450 81. Graphical Integrity• Your graphic should tell the truth about your data2/23/20095Spring 2009 CS 4460/7450 9Example20022001200019991998500475450Stock market crash?Spring 2009 CS 4460/7450 10Example200220012000199919985002500Show entire scale2/23/20096Spring 2009 CS 4460/7450 11Example200019901980197019605002500Show in contextSpring 2009 CS 4460/7450 12Chart Integrity• Where’s baseline?• What’s scale?• What’s context?2/23/20097Spring 2009 CS 4460/7450 13Vol 1, p. 54 (1) Where’s 0?Note middle ‘70Spring 2009 CS 4460/7450 14Vol 1, p 54 (2)What’s being compared?2/23/20098Spring 2009 CS 4460/7450 15Vol 1, 57Scale?Spring 2009 CS 4460/7450 16Vol 1, p. 61Scale?2/23/20099Spring 2009 CS 4460/7450 17Vol 1, p. 74Great work!Spring 2009 CS 4460/7450 18Vol 1, p. 74AhhhhShow the context2/23/200910Local ExampleSpring 2009 CS 4460/7450 19A huge rise?Atlanta Journal ConstitutionSummer ’08Spring 2009 CS 4460/7450 20Atlanta JournalConstitutionDec. ‘08More of thedata2/23/200911Spring 2009 CS 4460/7450 21Watch Size Coding• Height/width vs. area vs. volumeSpring 2009 CS 4460/7450 22Vol 1, p. 69area = value?2/23/200912Spring 2009 CS 4460/7450 23Vol 1, p. 62volume = value?Spring 2009 CS 4460/7450 24Measuring Misrepresentation• Visual attribute value should be directly proportional to data attribute valueSize of effect shown in graphicSize of effect in dataLie factor =42804549.4 =p.622/23/200913Spring 2009 CS 4460/7450 252. Design Aesthetics• Set of principles to help guide designersSpring 2009 CS 4460/7450 26Design Principles• Maximize data-ink ratioData ink ratio =Data inkTotal ink used in graphic= proportion of graphic’s ink devotedto the non-redundant display ofdata-information2/23/200914Spring 2009 CS 4460/7450 27Vol 1, p. 94GoodBadSpring 2009 CS 4460/7450 28Vol 1, p. 30Outstanding2/23/200915Spring 2009 CS 4460/7450 29More...• Above all else, show the data• Maximize the data-ink ratio• Erase non-data-ink• Erase redundant data-ink• Revise and editSpring 2009 CS 4460/7450 30More...• Maximize data densitydata density of graphic =number of entries in data matrixarea of data graphicQuote …2/23/200916Spring 2009 CS 4460/7450 31Maximize 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 168Spring 2009 CS 4460/7450 32Redesign charts• Bar chart, scatter plot, box plot(See drawings)2/23/200917Spring 2009 CS 4460/7450 33Design Principles• Avoid chartjunk− Extraneous visual elements that detract from messageSpring 2009 CS 4460/7450 34Vol 1, p 1082/23/200918Spring 2009 CS 4460/7450 35Vol 2, p.34 A classicDiamonds Were AGirl’s Best FriendSpring 2009 CS 4460/7450 36USA Todayhttp://www.usatoday.com/news/snapshot.htm2/23/200919Spring 2009 CS 4460/7450 37Junk Charts Bloghttp://junkcharts.typepad.com/Spring 2009 CS 4460/7450 38More ThoughtsGreat narrative: Vol.2, bottom page 33-342/23/200920Spring 2009 CS 4460/7450 39Design Principles• Utilize multifunctioning graphical elements(macro/micro readings)− Graphical elements that convey data information and a design functionSpring 2009 CS 4460/7450 40Vol 1, p 1402/23/200921Spring 2009 CS 4460/7450 41Vol 1, p. 141US Army Divisionsgoing to France inWW ILeonard P. AyresThe War with Germany1919Spring 2009 CS 4460/7450 42Vol 2, p. 36Plan de Paris1739Michel E. TurgotLouis Bretz2/23/200922Spring 2009 CS 4460/7450 43Vol 2, p. 37Manhattan 1989Manhattan Map CompanySpring 2009 CS 4460/7450 44Vol 2, p. 42Viet Nam Memorialin Washington D.C.Maya Ying Lin58,000+ dead soldiers2/23/200923Spring 2009 CS 4460/7450 45Vol 2, p. 44Spring 2009 CS 4460/7450 46Vol 2, p. 43Names listed chronologically by death2/23/200924Spring 2009 CS 4460/7450 47Design Principles• Use small multiples− Repeat visually similar graphical elements nearby rather than spreading far apartSpring 2009 CS 4460/7450 48Vol 1, p. 17023 hours ofLA air pollution2/23/200925Spring 2009 CS 4460/7450 49Vol 1, p. 173Chromosomes ofman, chimpanzee,gorilla & orangutanSpring 2009 CS 4460/7450 50Vol 1, p. 174ConsumerReports2/23/200926Spring 2009 CS 4460/7450 51Vol 2, p. 68NY TrainsSpring 2009 CS 4460/7450 52Vol 2, p. 68How to draw letters2/23/200927Spring 2009 CS 4460/7450 53Vol 2, p. 69CalligraphyMore Recent AdditionsSpring 2009 CS 4460/7450


View Full Document

GT CS 7450 - Tufte’s Design Principles

Documents in this Course
Animation

Animation

23 pages

Load more
Download Tufte’s Design Principles
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Tufte’s Design Principles and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Tufte’s Design Principles 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?