Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
Learning from constraints in information visualizationsIsabel Meirelles | [email protected]
Associate Professor, Graphic Design, Northeastern University
DH Forum 2014 The University of Kansas Sept.13
Information design Infographics !
Information visualization Data visualization
Information design Infographics
Graphical representations that aim at communicating information with the purpose to reveal patterns and relationships not known or not easily deduced without the aid of the visual presentation of information.
!
Information visualization Data visualization
“the use of computer-supported, interactive, visual representations of abstract data to amplify cognition” Card et al. : Readings in Information Visualization: Using Vision to Think
From Latin informare to give form or shape to, from in into +
formare to form, from forma a
form or shape + -ation indicating
a process or condition
Information
The Oxford American Thesaurus of Current English
*Weak definition. Strong definition
includes the further condition of
truthfulness.
Information
Definition* Definition
information = well-formed and meaningful data
M. Chen & L. Floridi (2012): An Analysis of Information in Visualization in Synthese, Springer
M. Chen & L. Floridi (2012): An Analysis of Information in Visualization in Synthese, Springer
Information taxonomy by Floridi
M. Chen & L. Floridi (2012): An Analysis of Information in Visualization in Synthese, Springer
Information map for visualisation by Chen & Floridi
Chen & Känicke (2010): An Information-theoretic Framework for Visualization, IEEE Visualization and Computer Graphics
SOURCE
VIS -ENCODER
VIS-CHANNEL
VIS-DECODER
DESTINATION
raw data
enriching & filtering
visual mapping
rendering
info
rma
tio
n
ge
om
etr
y &
la
be
ls
displayingoptical transmission
viewing
op
tica
l sig
na
l
op
tica
l sig
na
l
perception cognition
info
rma
tio
n
kn
ow
led
ge
knowledge
image
image
Visualization system by Chen & Känicke
M. Chen & L. Floridi (2012): An Analysis of Information in Visualization in Synthese, Springer
Information map for visualisation by Chen & Floridi
(historical)
intermezzo
9th-ct., France: M. Capella, De nuptiis,. Planetary diagrams
c. 1310, England: Table of the Ten Commandments from the De Lisle Psalter
Visual/diagrammatic representations over history
1582: Giordano Bruno Memory system c. 1460, England: T. Walsingham's treatise on mensural music.
To increase working memory
Stemmatic analysis of “being” (ens reale), reproduced on p. 34 of Michael Evans’ “The Geometry of the Mind”
To increase working memory + to facilitate search & discovery
9th-ct.: Genealogical tree 14th-ct.: Dichotomy
To increase working memory + to facilitate search & discovery + to support perceptual inference
1870: Charles Darwin sketch17th-ct.: comparative cosmologies
To increase working memory + to facilitate search & discovery + to support perceptual inference + to
provide models
1951, US: Color Blindess Wheel by Albert Munsell
To increase working memory + to facilitate search & discovery + to support perceptual inference + to
provide models + to support data manipulation
Baltimore MD 1951 7 x 8.5 inches “Albert Munsell’s color standards were among the most widely used in the twentieth century. Born in Boston in 1858 and trained as an artist, Munsell became more interested in color toward the end of the century and in 1989 created his Color Tree (based on a sphere). Munsell’s color system has since become internationally recognized and has earned itself a place as the accepted standard of color notation. In this example, a misshapen wheel elegantly gestures to the slightly off-balance imperfections inherent in color blindness.”
http://www.moma.org/interactives/exhibitions/2012/inventingabstraction/?page=connections
14th-ct.: Dichotomy 2004: Josh On <www.theyrule.net>
2011: Justin Matejka et al. (Autodesk) 9th-ct.: Genealogical tree
Google Search on 08/26/14: data visualization
from wow!
to why?
Why A Diagram is (Sometimes) Worth Ten Thousand Words
J. H. Larkin & H. A. Simon (1987): “Why a Diagram is (Sometimes) Worth Ten Thousand Words” in Cognitive Science, 11:1, pp. 65-99.
++ + + =?
=?
information designer
encodetarget audience
decode
M. Chen & L. Floridi (2012): An Analysis of Information in Visualization in Synthese, Springer
Information map for visualisation by Chen & Floridi
We, humans
take away 1
human-centered
artifacts
René Descartes (1664): Process of Visual Perception
constraintscognitive
perceptual
dimensions of medium
encoding
data types & attributes
knowledge
beliefs
…
Daniel Kahneman (2002): Image redrawn from “A Perspective on Intuitive Judgment and Choice”
Google Search on 08/26/14: data visualization
Google Search on 08/26/14: data visualizationThe Incredulity of Saint Thomas by Caravaggio, c. 1601–1602
visualization as evidence
CLOSE
Effective September 15, 2014, The Huffington Post privacy policy will be updated. Tolearn more about this update, please review our frequently asked questions(http://privacy.aol.com/faq/).
Media (http://www.huffingtonpost.com/media/) • Eat The Press (http://www.huffingtonpost.com/news/eat-the-press/)
• Calderone: The Backstory (http://www.huffingtonpost.com/news/the-backstory/) • Third Metric (http://www.huffingtonpost.com/news/third-metric/)
ADVERTISEMENT
MMOOSSTT PPOOPPUULLAARR
Miley Cyrus Wears The World's LeastWearable Bathing Suit On V Magazine(http://www.huffingtonpost.com/2014/08/28/miley-cyrus-v-magazine-cover_n_5731118.html?utm_hp_ref=mostpopular)
Lena Dunham Shares An 'I Woke UpLike This' Selfie(http://www.huffingtonpost.com/2014/08/29/lena-dunham-i-woke-up-like-this-selfie_n_5736148.html?utm_hp_ref=mostpopular)
How A Breakup Led To Lisa's136-Pound Weight Loss(http://www.huffingtonpost.com/2014/08/28/i-lost-weight-lisa-jarrett_n_5671641.html?utm_hp_ref=mostpopular)
10 'If We're Not Married By...' PactsThat Actually Panned Out(http://www.huffingtonpost.com/2014/08/28/marriage-pacts_n_5730724.html?utm_hp_ref=mostpopular)
And The Worst-Dressed Stars At TheEmmys Were...(http://www.huffingtonpost.com/2014/08/25/emmys-worst-dressed-2014_n_5682543.html?utm_hp_ref=mostpopular)
WATCH: Family Has Horrifying, ViolentReaction To Son's Coming Out As Gay(http://www.huffingtonpost.com/2014/08/28/family-son-coming-out-gay-video_n_5731462.html?utm_hp_ref=mostpopular)
Study Reveals Interesting LinkBetween Men's Height And MaritalSuccess(http://www.huffingtonpost.com/2014/08/28/link-between-mens-height-divorce-_n_5731688.html?utm_hp_ref=mostpopular)
A Tale Of Kindergarten Hardship, InOne Little Boy's Before-And-AfterPhotos(http://www.huffingtonpost.com/2014/08/29/first-day-of-kindergarten-photo_n_5736498.html?utm_hp_ref=mostpopular)
Police Searching For Prowler UncoverIncest Instead(http://www.huffingtonpost.com/2014/08/27/christopher-buckner-timothy-savoy_n_5723030.html?utm_hp_ref=mostpopular)
Why I Wish My Dad Had Come Out AsGay Sooner(http://www.huffingtonpost.com/2014/08/29/daughter-gay-father-coming-out_n_5737932.html?utm_hp_ref=mostpopular)
Half-ton Alligator Sets World Record(http://www.huffingtonpost.com/2014/08/29/world-record-alligator_n_5738998.html?utm_hp_ref=mostpopular)
This Vine Of A Tiny Piglet PrancingThrough Grass Will Be The Best 6Seconds Of Your Day(http://www.huffingtonpost.com/2014/08/27/teacup-pig-vine_n_5722696.html?utm_hp_ref=mostpopular)
Jake 'The Snake' Roberts In IntensiveCare After Collapse(http://www.huffingtonpost.com/2014/08/28/jake-the-snake-roberts-hospitalized_n_5733856.html?utm_hp_ref=mostpopular)
If Anyone Deserves To Be This Happy,It's Scratchy The Pit Bull(http://www.huffingtonpost.com/2014/08/27/scratchy-pit-bull_n_5723852.html?utm_hp_ref=mostpopular)
Freaky Experiment May Prove We LiveInside A Hologram(http://www.huffingtonpost.com/2014/08/29/space-hologram-experiment-two-dimensions_n_5726262.html?utm_hp_ref=mostpopular)
Everyday Sexism In Just 9 Illustrations(http://www.huffingtonpost.com/2014/08/28/gender-pictograms-yang-liu_n_5711207.html?utm_hp_ref=mostpopular)
4-Year-Old Preschooler ReportedlyExpelled Because Of His Mother'sFacebook Post(http://www.huffingtonpost.com/2014/08/28/ashley-habat-facebook_n_5726032.html?utm_hp_ref=mostpopular)
Lamb Hops Down The Hallway, MakesEverything Better In 6 Seconds(http://www.huffingtonpost.com/2014/08/28/lamb-hops-down-hallway-vine_n_5729260.html?utm_hp_ref=mostpopular)
Victim's Family Speaks Out After UziKilling(http://www.huffingtonpost.com/2014/08/29/victims-
POLITICS(HTTP://WWW.HUFFINGTONPOST.COM
/POLITICS/)
BUSINESS(HTTP://WWW.HUFFINGTONPOST.COM
/BUSINESS/)
ENTERTAINMENT(HTTP://WWW.HUFFINGTONPOST.COM
/ENTERTAINMENT/)
TECH(HTTP://WWW.HUFFINGTONPOST.COM
/TECHNOLOGY/)
TV(HTTP://WWW.HUFFINGTONPOST.COM/TV/)
ARTS(HTTP://WWW.HUFFINGTONPOST.COM
/ARTS/)
BOOKS(HTTP://WWW.HUFFINGTONPOST.COM
/BOOKS/)(HTTP://WWW.HUFFINGTONPOST.
This Is How You Leave Your Job(http://www.huffingtonpost.com/2014/08/29/cnn-layoff-video-lisa-employee-staffer_n_5737476.html)
James Foley Was Tortured By ISISMilitants Using CIA Techniques(http://www.huffingtonpost.com/2014/08/28/james-foley-tortured-isis-waterboarded_n_5732098.html)
Privileged White Guys On Fox NewsAgree: There's No Such Thing AsWhite Privilege(http://www.huffingtonpost.com/2014/08/28/white-privilege-conservatives_n_5723842.html)
Chelsea Clinton Leaving (http://www.huffingtonpo/2014/08/29/chelsea-clintonbc-news_n_5736546.htm
(http://www.huffingtonpost.com/2014/08/29/cnn-layoff-video-lisa-employee-staffer_n_5737476.html)
(http://www.huffingtonpost.com/2014/08/28/james-foley-tortured-isis-waterboarded_n_5732098.html)
(http://www.huffingtonpost.com/2014/08/28/white-privilege-conservatives_n_5723842.html)
(http://www.huffingtonpost./29/chelsea-clinton-nbc-news_n_5736546.htm
Randy Krum (/randy-krum/) Become a fan (/users
/becomeFan.php?of=hp_blogger_Randy Krum)
Founder and President, InfoNewt; Author of Cool Infographics
Posted: 08/29/2014 3:29 pm EDT Updated: 08/29/2014 3:59 pm EDT
False Visualizations: WhenJournalists Get Data Viz Wrong
Accuracy is the most important aspect of an infographic design!
Last week, the article The Truth about the Ice Bucket Challenge (http://www.vox.com/2014/8/20/6040435/als-ice-bucket-challenge-and-why-we-give-to-charity-donate)by Julia Belluz on Vox Media included the infographic, Where We Donate vs. DiseasesThat Kill Us (http://cdn3.vox-cdn.com/uploads/chorus_asset/file/663618/Donating.vs.Death-Graph.0.jpg), that used proportionally sized circles as its datavisualization. The problem with this design is that the circle sizes don't match thevalues shown. This is a false visualization and significantly exaggerates the smalleramounts of money contributed to each charity and the deaths attributed to eachcause.
This causes problems because readers often just look at the visuals without readingthe actual numbers. They start with the assumption that a visualization accuratelyrepresents the data. The Vox Media story and infographic already have over 12,000shares on Facebook, and this is a great case study for designers to understand howimportant it is to visualize data accurately.
As readers, we see the area of two-dimensional shapes on the page to represent thedifferent values, but design software only allows width and height adjustments to sizeshapes. Designers make the mistake of adjusting the diameter of circles to match thedata instead of the area, which incorrectly sizes the circles dramatically. It takes somegeometry calculations in a spreadsheet to find the areas and then calculate theappropriate diameters for each circle. To demonstrate, I created this corrected versionof the infographic.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISED.jpg)
My Google Docs spreadsheet of the correct circle area and diameter calculations isavailable here (https://docs.google.com/spreadsheets/d/1hRFvUhAVi7UUP15rBcAU1W-_LGqnz3fNi3bKUqTeS-Q/edit#gid=0).
Assuming this was a design mistake, and there was no intent to deceive the audience,this is a common mistake that many designers make. So many designers, that Iincluded an entire section on this topic in the Cool Infographics book(http://www.coolinfographics.com/book/) to help designers understand how to sizethe area of circles.
I made one additional improvement to the corrected design above by removing thecolor legend and listing the charities and causes of death right next to the appropriatecircles. This makes the whole visualization easier for the audience to read byeliminating the need to look back-and-forth from the circles to the color legend tofigure out what each circle represents. Placing the text next to each circle keeps theinformation in the reader's field of view which minimizes eye movement.
Sticking with the circles data visualization style, I wanted to take the design a little bitfurther. I would recommend one of two alternate improvements. First, adding coloredconnecting lines is one way to make it easier for the audience to find the relatedcircles in the columns sorted in descending order.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISEDLines.jpg)
A second alternative would be to sort the lists to line up the related circles. This makesit much easier for the audience to see the direct comparisons between charitablecontributions and death rates related to the same cause.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISEDSort.jpg)
I'm passing over any discussion about whether using proportionally sized circles (abubble chart) is the best visualization method for this data. If a designer makes the
(/users/login/)
(http://twitter.com/rtkrum)
(http://www.huffingtonpost.com/2014/08/28/miley-cyrus-v-magazine-cover_n_5731118.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/lena-dunham-i-woke-up-like-this-selfie_n_5736148.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/i-lost-weight-lisa-jarrett_n_5671641.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/marriage-pacts_n_5730724.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/25/emmys-worst-dressed-2014_n_5682543.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/family-son-coming-out-gay-video_n_5731462.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/link-between-mens-height-divorce-_n_5731688.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/first-day-of-kindergarten-photo_n_5736498.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/christopher-buckner-timothy-savoy_n_5723030.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/daughter-gay-father-coming-out_n_5737932.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/world-record-alligator_n_5738998.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/teacup-pig-vine_n_5722696.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/jake-the-snake-roberts-hospitalized_n_5733856.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/scratchy-pit-bull_n_5723852.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/space-hologram-experiment-two-dimensions_n_5726262.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/gender-pictograms-yang-liu_n_5711207.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/ashley-habat-facebook_n_5726032.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/lamb-hops-down-hallway-vine_n_5729260.html?utm_hp_ref=mostpopular)
Featuring fresh takes and real-time analysis fromHuffPost's signature lineup of contributors
Etan Thomas(http://www.huffingtonpost.com/etan-thomas/athletes-take-a-stand-for_b_5724938.html?utm_hp_ref=Media)
Valerie Plame Wilson(http://www.huffingtonpost.com/valerie-plame-wilson/international-day-against_1_b_5736184.html?utm_hp_ref=Media)
Bernard-Henri Lévy(http://www.huffingtonpost.com/bernardhenri-levy/questions-on-dramatic-mon_b_5728180.html?utm_hp_ref=Media)
Jane Harman(http://www.huffingtonpost.com/rep-jane-harman/why-is-congress-awol_b_5715667.html?utm_hp_ref=Media)
HOT ON THE BLOG
FRONT PAGE(HTTP://WWW.HUFFINGTONPOST.COM)
August 30, 2014
(http://www.huffingtonpost.com/media)
Edition: U.S. FollowFollow Newsletters Huffington Post Search
Smarter Ideas (/news/smarter-ideas) True Colors (/news/true-colors/)
iOS app (http://itunes.apple.com/us/app/the-huffington-post/id306621789?mt=8)
Android app (https://play.google.com/store/apps/details?id=com.huffingtonpost.android&hl=en) More (/big-news/#)
Log in Create Account
(javscript:void(0))
11
(https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.huffingtonpost.com%2Frandy-krum%2Ffalse-visualizations-when_b_5736106.html)
Share
10
(https://twitter.com/intent/tweet?lang=en&text=False+Visualizations%3A+When+Journalists+Get+Data+Viz+Wrong+%40HuffPostBlog++http%3A%2F%2Fhuff.to%2F1tKLgUV)
Tweet
5
(http://www.linkedin.com/cws/share?url=http://www.huffingtonpost.com/randy-krum/false-visualizations-when_b_5736106.html)1
0
Comment
False Visualizations: When Journalists Get Data Viz Wrong | R... http://www.huffingtonpost.com/randy-krum/false-visualization...
1 of 2 8/30/14, 10:00 AM
CLOSE
Effective September 15, 2014, The Huffington Post privacy policy will be updated. Tolearn more about this update, please review our frequently asked questions(http://privacy.aol.com/faq/).
Media (http://www.huffingtonpost.com/media/) • Eat The Press (http://www.huffingtonpost.com/news/eat-the-press/)
• Calderone: The Backstory (http://www.huffingtonpost.com/news/the-backstory/) • Third Metric (http://www.huffingtonpost.com/news/third-metric/)
ADVERTISEMENT
MMOOSSTT PPOOPPUULLAARR
Miley Cyrus Wears The World's LeastWearable Bathing Suit On V Magazine(http://www.huffingtonpost.com/2014/08/28/miley-cyrus-v-magazine-cover_n_5731118.html?utm_hp_ref=mostpopular)
Lena Dunham Shares An 'I Woke UpLike This' Selfie(http://www.huffingtonpost.com/2014/08/29/lena-dunham-i-woke-up-like-this-selfie_n_5736148.html?utm_hp_ref=mostpopular)
How A Breakup Led To Lisa's136-Pound Weight Loss(http://www.huffingtonpost.com/2014/08/28/i-lost-weight-lisa-jarrett_n_5671641.html?utm_hp_ref=mostpopular)
10 'If We're Not Married By...' PactsThat Actually Panned Out(http://www.huffingtonpost.com/2014/08/28/marriage-pacts_n_5730724.html?utm_hp_ref=mostpopular)
And The Worst-Dressed Stars At TheEmmys Were...(http://www.huffingtonpost.com/2014/08/25/emmys-worst-dressed-2014_n_5682543.html?utm_hp_ref=mostpopular)
WATCH: Family Has Horrifying, ViolentReaction To Son's Coming Out As Gay(http://www.huffingtonpost.com/2014/08/28/family-son-coming-out-gay-video_n_5731462.html?utm_hp_ref=mostpopular)
Study Reveals Interesting LinkBetween Men's Height And MaritalSuccess(http://www.huffingtonpost.com/2014/08/28/link-between-mens-height-divorce-_n_5731688.html?utm_hp_ref=mostpopular)
A Tale Of Kindergarten Hardship, InOne Little Boy's Before-And-AfterPhotos(http://www.huffingtonpost.com/2014/08/29/first-day-of-kindergarten-photo_n_5736498.html?utm_hp_ref=mostpopular)
Police Searching For Prowler UncoverIncest Instead(http://www.huffingtonpost.com/2014/08/27/christopher-buckner-timothy-savoy_n_5723030.html?utm_hp_ref=mostpopular)
Why I Wish My Dad Had Come Out AsGay Sooner(http://www.huffingtonpost.com/2014/08/29/daughter-gay-father-coming-out_n_5737932.html?utm_hp_ref=mostpopular)
Half-ton Alligator Sets World Record(http://www.huffingtonpost.com/2014/08/29/world-record-alligator_n_5738998.html?utm_hp_ref=mostpopular)
This Vine Of A Tiny Piglet PrancingThrough Grass Will Be The Best 6Seconds Of Your Day(http://www.huffingtonpost.com/2014/08/27/teacup-pig-vine_n_5722696.html?utm_hp_ref=mostpopular)
Jake 'The Snake' Roberts In IntensiveCare After Collapse(http://www.huffingtonpost.com/2014/08/28/jake-the-snake-roberts-hospitalized_n_5733856.html?utm_hp_ref=mostpopular)
If Anyone Deserves To Be This Happy,It's Scratchy The Pit Bull(http://www.huffingtonpost.com/2014/08/27/scratchy-pit-bull_n_5723852.html?utm_hp_ref=mostpopular)
Freaky Experiment May Prove We LiveInside A Hologram(http://www.huffingtonpost.com/2014/08/29/space-hologram-experiment-two-dimensions_n_5726262.html?utm_hp_ref=mostpopular)
Everyday Sexism In Just 9 Illustrations(http://www.huffingtonpost.com/2014/08/28/gender-pictograms-yang-liu_n_5711207.html?utm_hp_ref=mostpopular)
4-Year-Old Preschooler ReportedlyExpelled Because Of His Mother'sFacebook Post(http://www.huffingtonpost.com/2014/08/28/ashley-habat-facebook_n_5726032.html?utm_hp_ref=mostpopular)
Lamb Hops Down The Hallway, MakesEverything Better In 6 Seconds(http://www.huffingtonpost.com/2014/08/28/lamb-hops-down-hallway-vine_n_5729260.html?utm_hp_ref=mostpopular)
Victim's Family Speaks Out After UziKilling(http://www.huffingtonpost.com/2014/08/29/victims-
POLITICS(HTTP://WWW.HUFFINGTONPOST.COM
/POLITICS/)
BUSINESS(HTTP://WWW.HUFFINGTONPOST.COM
/BUSINESS/)
ENTERTAINMENT(HTTP://WWW.HUFFINGTONPOST.COM
/ENTERTAINMENT/)
TECH(HTTP://WWW.HUFFINGTONPOST.COM
/TECHNOLOGY/)
TV(HTTP://WWW.HUFFINGTONPOST.COM/TV/)
ARTS(HTTP://WWW.HUFFINGTONPOST.COM
/ARTS/)
BOOKS(HTTP://WWW.HUFFINGTONPOST.COM
/BOOKS/)(HTTP://WWW.HUFFINGTONPOST.
This Is How You Leave Your Job(http://www.huffingtonpost.com/2014/08/29/cnn-layoff-video-lisa-employee-staffer_n_5737476.html)
James Foley Was Tortured By ISISMilitants Using CIA Techniques(http://www.huffingtonpost.com/2014/08/28/james-foley-tortured-isis-waterboarded_n_5732098.html)
Privileged White Guys On Fox NewsAgree: There's No Such Thing AsWhite Privilege(http://www.huffingtonpost.com/2014/08/28/white-privilege-conservatives_n_5723842.html)
Chelsea Clinton Leaving (http://www.huffingtonpo/2014/08/29/chelsea-clintonbc-news_n_5736546.htm
(http://www.huffingtonpost.com/2014/08/29/cnn-layoff-video-lisa-employee-staffer_n_5737476.html)
(http://www.huffingtonpost.com/2014/08/28/james-foley-tortured-isis-waterboarded_n_5732098.html)
(http://www.huffingtonpost.com/2014/08/28/white-privilege-conservatives_n_5723842.html)
(http://www.huffingtonpost./29/chelsea-clinton-nbc-news_n_5736546.htm
Randy Krum (/randy-krum/) Become a fan (/users
/becomeFan.php?of=hp_blogger_Randy Krum)
Founder and President, InfoNewt; Author of Cool Infographics
Posted: 08/29/2014 3:29 pm EDT Updated: 08/29/2014 3:59 pm EDT
False Visualizations: WhenJournalists Get Data Viz Wrong
Accuracy is the most important aspect of an infographic design!
Last week, the article The Truth about the Ice Bucket Challenge (http://www.vox.com/2014/8/20/6040435/als-ice-bucket-challenge-and-why-we-give-to-charity-donate)by Julia Belluz on Vox Media included the infographic, Where We Donate vs. DiseasesThat Kill Us (http://cdn3.vox-cdn.com/uploads/chorus_asset/file/663618/Donating.vs.Death-Graph.0.jpg), that used proportionally sized circles as its datavisualization. The problem with this design is that the circle sizes don't match thevalues shown. This is a false visualization and significantly exaggerates the smalleramounts of money contributed to each charity and the deaths attributed to eachcause.
This causes problems because readers often just look at the visuals without readingthe actual numbers. They start with the assumption that a visualization accuratelyrepresents the data. The Vox Media story and infographic already have over 12,000shares on Facebook, and this is a great case study for designers to understand howimportant it is to visualize data accurately.
As readers, we see the area of two-dimensional shapes on the page to represent thedifferent values, but design software only allows width and height adjustments to sizeshapes. Designers make the mistake of adjusting the diameter of circles to match thedata instead of the area, which incorrectly sizes the circles dramatically. It takes somegeometry calculations in a spreadsheet to find the areas and then calculate theappropriate diameters for each circle. To demonstrate, I created this corrected versionof the infographic.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISED.jpg)
My Google Docs spreadsheet of the correct circle area and diameter calculations isavailable here (https://docs.google.com/spreadsheets/d/1hRFvUhAVi7UUP15rBcAU1W-_LGqnz3fNi3bKUqTeS-Q/edit#gid=0).
Assuming this was a design mistake, and there was no intent to deceive the audience,this is a common mistake that many designers make. So many designers, that Iincluded an entire section on this topic in the Cool Infographics book(http://www.coolinfographics.com/book/) to help designers understand how to sizethe area of circles.
I made one additional improvement to the corrected design above by removing thecolor legend and listing the charities and causes of death right next to the appropriatecircles. This makes the whole visualization easier for the audience to read byeliminating the need to look back-and-forth from the circles to the color legend tofigure out what each circle represents. Placing the text next to each circle keeps theinformation in the reader's field of view which minimizes eye movement.
Sticking with the circles data visualization style, I wanted to take the design a little bitfurther. I would recommend one of two alternate improvements. First, adding coloredconnecting lines is one way to make it easier for the audience to find the relatedcircles in the columns sorted in descending order.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISEDLines.jpg)
A second alternative would be to sort the lists to line up the related circles. This makesit much easier for the audience to see the direct comparisons between charitablecontributions and death rates related to the same cause.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISEDSort.jpg)
I'm passing over any discussion about whether using proportionally sized circles (abubble chart) is the best visualization method for this data. If a designer makes the
(/users/login/)
(http://twitter.com/rtkrum)
(http://www.huffingtonpost.com/2014/08/28/miley-cyrus-v-magazine-cover_n_5731118.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/lena-dunham-i-woke-up-like-this-selfie_n_5736148.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/i-lost-weight-lisa-jarrett_n_5671641.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/marriage-pacts_n_5730724.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/25/emmys-worst-dressed-2014_n_5682543.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/family-son-coming-out-gay-video_n_5731462.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/link-between-mens-height-divorce-_n_5731688.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/first-day-of-kindergarten-photo_n_5736498.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/christopher-buckner-timothy-savoy_n_5723030.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/daughter-gay-father-coming-out_n_5737932.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/world-record-alligator_n_5738998.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/teacup-pig-vine_n_5722696.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/jake-the-snake-roberts-hospitalized_n_5733856.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/scratchy-pit-bull_n_5723852.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/space-hologram-experiment-two-dimensions_n_5726262.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/gender-pictograms-yang-liu_n_5711207.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/ashley-habat-facebook_n_5726032.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/lamb-hops-down-hallway-vine_n_5729260.html?utm_hp_ref=mostpopular)
Featuring fresh takes and real-time analysis fromHuffPost's signature lineup of contributors
Etan Thomas(http://www.huffingtonpost.com/etan-thomas/athletes-take-a-stand-for_b_5724938.html?utm_hp_ref=Media)
Valerie Plame Wilson(http://www.huffingtonpost.com/valerie-plame-wilson/international-day-against_1_b_5736184.html?utm_hp_ref=Media)
Bernard-Henri Lévy(http://www.huffingtonpost.com/bernardhenri-levy/questions-on-dramatic-mon_b_5728180.html?utm_hp_ref=Media)
Jane Harman(http://www.huffingtonpost.com/rep-jane-harman/why-is-congress-awol_b_5715667.html?utm_hp_ref=Media)
HOT ON THE BLOG
FRONT PAGE(HTTP://WWW.HUFFINGTONPOST.COM)
August 30, 2014
(http://www.huffingtonpost.com/media)
Edition: U.S. FollowFollow Newsletters Huffington Post Search
Smarter Ideas (/news/smarter-ideas) True Colors (/news/true-colors/)
iOS app (http://itunes.apple.com/us/app/the-huffington-post/id306621789?mt=8)
Android app (https://play.google.com/store/apps/details?id=com.huffingtonpost.android&hl=en) More (/big-news/#)
Log in Create Account
(javscript:void(0))
11
(https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.huffingtonpost.com%2Frandy-krum%2Ffalse-visualizations-when_b_5736106.html)
Share
10
(https://twitter.com/intent/tweet?lang=en&text=False+Visualizations%3A+When+Journalists+Get+Data+Viz+Wrong+%40HuffPostBlog++http%3A%2F%2Fhuff.to%2F1tKLgUV)
Tweet
5
(http://www.linkedin.com/cws/share?url=http://www.huffingtonpost.com/randy-krum/false-visualizations-when_b_5736106.html)1
0
Comment
False Visualizations: When Journalists Get Data Viz Wrong | R... http://www.huffingtonpost.com/randy-krum/false-visualization...
1 of 2 8/30/14, 10:00 AM
CLOSE
Effective September 15, 2014, The Huffington Post privacy policy will be updated. Tolearn more about this update, please review our frequently asked questions(http://privacy.aol.com/faq/).
Media (http://www.huffingtonpost.com/media/) • Eat The Press (http://www.huffingtonpost.com/news/eat-the-press/)
• Calderone: The Backstory (http://www.huffingtonpost.com/news/the-backstory/) • Third Metric (http://www.huffingtonpost.com/news/third-metric/)
ADVERTISEMENT
MMOOSSTT PPOOPPUULLAARR
Miley Cyrus Wears The World's LeastWearable Bathing Suit On V Magazine(http://www.huffingtonpost.com/2014/08/28/miley-cyrus-v-magazine-cover_n_5731118.html?utm_hp_ref=mostpopular)
Lena Dunham Shares An 'I Woke UpLike This' Selfie(http://www.huffingtonpost.com/2014/08/29/lena-dunham-i-woke-up-like-this-selfie_n_5736148.html?utm_hp_ref=mostpopular)
How A Breakup Led To Lisa's136-Pound Weight Loss(http://www.huffingtonpost.com/2014/08/28/i-lost-weight-lisa-jarrett_n_5671641.html?utm_hp_ref=mostpopular)
10 'If We're Not Married By...' PactsThat Actually Panned Out(http://www.huffingtonpost.com/2014/08/28/marriage-pacts_n_5730724.html?utm_hp_ref=mostpopular)
And The Worst-Dressed Stars At TheEmmys Were...(http://www.huffingtonpost.com/2014/08/25/emmys-worst-dressed-2014_n_5682543.html?utm_hp_ref=mostpopular)
WATCH: Family Has Horrifying, ViolentReaction To Son's Coming Out As Gay(http://www.huffingtonpost.com/2014/08/28/family-son-coming-out-gay-video_n_5731462.html?utm_hp_ref=mostpopular)
Study Reveals Interesting LinkBetween Men's Height And MaritalSuccess(http://www.huffingtonpost.com/2014/08/28/link-between-mens-height-divorce-_n_5731688.html?utm_hp_ref=mostpopular)
A Tale Of Kindergarten Hardship, InOne Little Boy's Before-And-AfterPhotos(http://www.huffingtonpost.com/2014/08/29/first-day-of-kindergarten-photo_n_5736498.html?utm_hp_ref=mostpopular)
Police Searching For Prowler UncoverIncest Instead(http://www.huffingtonpost.com/2014/08/27/christopher-buckner-timothy-savoy_n_5723030.html?utm_hp_ref=mostpopular)
Why I Wish My Dad Had Come Out AsGay Sooner(http://www.huffingtonpost.com/2014/08/29/daughter-gay-father-coming-out_n_5737932.html?utm_hp_ref=mostpopular)
Half-ton Alligator Sets World Record(http://www.huffingtonpost.com/2014/08/29/world-record-alligator_n_5738998.html?utm_hp_ref=mostpopular)
This Vine Of A Tiny Piglet PrancingThrough Grass Will Be The Best 6Seconds Of Your Day(http://www.huffingtonpost.com/2014/08/27/teacup-pig-vine_n_5722696.html?utm_hp_ref=mostpopular)
Jake 'The Snake' Roberts In IntensiveCare After Collapse(http://www.huffingtonpost.com/2014/08/28/jake-the-snake-roberts-hospitalized_n_5733856.html?utm_hp_ref=mostpopular)
If Anyone Deserves To Be This Happy,It's Scratchy The Pit Bull(http://www.huffingtonpost.com/2014/08/27/scratchy-pit-bull_n_5723852.html?utm_hp_ref=mostpopular)
Freaky Experiment May Prove We LiveInside A Hologram(http://www.huffingtonpost.com/2014/08/29/space-hologram-experiment-two-dimensions_n_5726262.html?utm_hp_ref=mostpopular)
Everyday Sexism In Just 9 Illustrations(http://www.huffingtonpost.com/2014/08/28/gender-pictograms-yang-liu_n_5711207.html?utm_hp_ref=mostpopular)
4-Year-Old Preschooler ReportedlyExpelled Because Of His Mother'sFacebook Post(http://www.huffingtonpost.com/2014/08/28/ashley-habat-facebook_n_5726032.html?utm_hp_ref=mostpopular)
Lamb Hops Down The Hallway, MakesEverything Better In 6 Seconds(http://www.huffingtonpost.com/2014/08/28/lamb-hops-down-hallway-vine_n_5729260.html?utm_hp_ref=mostpopular)
Victim's Family Speaks Out After UziKilling(http://www.huffingtonpost.com/2014/08/29/victims-
POLITICS(HTTP://WWW.HUFFINGTONPOST.COM
/POLITICS/)
BUSINESS(HTTP://WWW.HUFFINGTONPOST.COM
/BUSINESS/)
ENTERTAINMENT(HTTP://WWW.HUFFINGTONPOST.COM
/ENTERTAINMENT/)
TECH(HTTP://WWW.HUFFINGTONPOST.COM
/TECHNOLOGY/)
TV(HTTP://WWW.HUFFINGTONPOST.COM/TV/)
ARTS(HTTP://WWW.HUFFINGTONPOST.COM
/ARTS/)
BOOKS(HTTP://WWW.HUFFINGTONPOST.COM
/BOOKS/)(HTTP://WWW.HUFFINGTONPOST.
This Is How You Leave Your Job(http://www.huffingtonpost.com/2014/08/29/cnn-layoff-video-lisa-employee-staffer_n_5737476.html)
James Foley Was Tortured By ISISMilitants Using CIA Techniques(http://www.huffingtonpost.com/2014/08/28/james-foley-tortured-isis-waterboarded_n_5732098.html)
Privileged White Guys On Fox NewsAgree: There's No Such Thing AsWhite Privilege(http://www.huffingtonpost.com/2014/08/28/white-privilege-conservatives_n_5723842.html)
Chelsea Clinton Leaving (http://www.huffingtonpo/2014/08/29/chelsea-clintonbc-news_n_5736546.htm
(http://www.huffingtonpost.com/2014/08/29/cnn-layoff-video-lisa-employee-staffer_n_5737476.html)
(http://www.huffingtonpost.com/2014/08/28/james-foley-tortured-isis-waterboarded_n_5732098.html)
(http://www.huffingtonpost.com/2014/08/28/white-privilege-conservatives_n_5723842.html)
(http://www.huffingtonpost./29/chelsea-clinton-nbc-news_n_5736546.htm
Randy Krum (/randy-krum/) Become a fan (/users
/becomeFan.php?of=hp_blogger_Randy Krum)
Founder and President, InfoNewt; Author of Cool Infographics
Posted: 08/29/2014 3:29 pm EDT Updated: 08/29/2014 3:59 pm EDT
False Visualizations: WhenJournalists Get Data Viz Wrong
Accuracy is the most important aspect of an infographic design!
Last week, the article The Truth about the Ice Bucket Challenge (http://www.vox.com/2014/8/20/6040435/als-ice-bucket-challenge-and-why-we-give-to-charity-donate)by Julia Belluz on Vox Media included the infographic, Where We Donate vs. DiseasesThat Kill Us (http://cdn3.vox-cdn.com/uploads/chorus_asset/file/663618/Donating.vs.Death-Graph.0.jpg), that used proportionally sized circles as its datavisualization. The problem with this design is that the circle sizes don't match thevalues shown. This is a false visualization and significantly exaggerates the smalleramounts of money contributed to each charity and the deaths attributed to eachcause.
This causes problems because readers often just look at the visuals without readingthe actual numbers. They start with the assumption that a visualization accuratelyrepresents the data. The Vox Media story and infographic already have over 12,000shares on Facebook, and this is a great case study for designers to understand howimportant it is to visualize data accurately.
As readers, we see the area of two-dimensional shapes on the page to represent thedifferent values, but design software only allows width and height adjustments to sizeshapes. Designers make the mistake of adjusting the diameter of circles to match thedata instead of the area, which incorrectly sizes the circles dramatically. It takes somegeometry calculations in a spreadsheet to find the areas and then calculate theappropriate diameters for each circle. To demonstrate, I created this corrected versionof the infographic.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISED.jpg)
My Google Docs spreadsheet of the correct circle area and diameter calculations isavailable here (https://docs.google.com/spreadsheets/d/1hRFvUhAVi7UUP15rBcAU1W-_LGqnz3fNi3bKUqTeS-Q/edit#gid=0).
Assuming this was a design mistake, and there was no intent to deceive the audience,this is a common mistake that many designers make. So many designers, that Iincluded an entire section on this topic in the Cool Infographics book(http://www.coolinfographics.com/book/) to help designers understand how to sizethe area of circles.
I made one additional improvement to the corrected design above by removing thecolor legend and listing the charities and causes of death right next to the appropriatecircles. This makes the whole visualization easier for the audience to read byeliminating the need to look back-and-forth from the circles to the color legend tofigure out what each circle represents. Placing the text next to each circle keeps theinformation in the reader's field of view which minimizes eye movement.
Sticking with the circles data visualization style, I wanted to take the design a little bitfurther. I would recommend one of two alternate improvements. First, adding coloredconnecting lines is one way to make it easier for the audience to find the relatedcircles in the columns sorted in descending order.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISEDLines.jpg)
A second alternative would be to sort the lists to line up the related circles. This makesit much easier for the audience to see the direct comparisons between charitablecontributions and death rates related to the same cause.
(http://images.huffingtonpost.com/2014-08-29-Donating.vs.DeathGraph.REVISEDSort.jpg)
I'm passing over any discussion about whether using proportionally sized circles (abubble chart) is the best visualization method for this data. If a designer makes the
(/users/login/)
(http://twitter.com/rtkrum)
(http://www.huffingtonpost.com/2014/08/28/miley-cyrus-v-magazine-cover_n_5731118.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/lena-dunham-i-woke-up-like-this-selfie_n_5736148.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/i-lost-weight-lisa-jarrett_n_5671641.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/marriage-pacts_n_5730724.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/25/emmys-worst-dressed-2014_n_5682543.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/family-son-coming-out-gay-video_n_5731462.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/link-between-mens-height-divorce-_n_5731688.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/first-day-of-kindergarten-photo_n_5736498.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/christopher-buckner-timothy-savoy_n_5723030.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/daughter-gay-father-coming-out_n_5737932.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/world-record-alligator_n_5738998.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/teacup-pig-vine_n_5722696.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/jake-the-snake-roberts-hospitalized_n_5733856.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/27/scratchy-pit-bull_n_5723852.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/29/space-hologram-experiment-two-dimensions_n_5726262.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/gender-pictograms-yang-liu_n_5711207.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/ashley-habat-facebook_n_5726032.html?utm_hp_ref=mostpopular)
(http://www.huffingtonpost.com/2014/08/28/lamb-hops-down-hallway-vine_n_5729260.html?utm_hp_ref=mostpopular)
Featuring fresh takes and real-time analysis fromHuffPost's signature lineup of contributors
Etan Thomas(http://www.huffingtonpost.com/etan-thomas/athletes-take-a-stand-for_b_5724938.html?utm_hp_ref=Media)
Valerie Plame Wilson(http://www.huffingtonpost.com/valerie-plame-wilson/international-day-against_1_b_5736184.html?utm_hp_ref=Media)
Bernard-Henri Lévy(http://www.huffingtonpost.com/bernardhenri-levy/questions-on-dramatic-mon_b_5728180.html?utm_hp_ref=Media)
Jane Harman(http://www.huffingtonpost.com/rep-jane-harman/why-is-congress-awol_b_5715667.html?utm_hp_ref=Media)
HOT ON THE BLOG
FRONT PAGE(HTTP://WWW.HUFFINGTONPOST.COM)
August 30, 2014
(http://www.huffingtonpost.com/media)
Edition: U.S. FollowFollow Newsletters Huffington Post Search
Smarter Ideas (/news/smarter-ideas) True Colors (/news/true-colors/)
iOS app (http://itunes.apple.com/us/app/the-huffington-post/id306621789?mt=8)
Android app (https://play.google.com/store/apps/details?id=com.huffingtonpost.android&hl=en) More (/big-news/#)
Log in Create Account
(javscript:void(0))
11
(https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.huffingtonpost.com%2Frandy-krum%2Ffalse-visualizations-when_b_5736106.html)
Share
10
(https://twitter.com/intent/tweet?lang=en&text=False+Visualizations%3A+When+Journalists+Get+Data+Viz+Wrong+%40HuffPostBlog++http%3A%2F%2Fhuff.to%2F1tKLgUV)
Tweet
5
(http://www.linkedin.com/cws/share?url=http://www.huffingtonpost.com/randy-krum/false-visualizations-when_b_5736106.html)1
0
Comment
False Visualizations: When Journalists Get Data Viz Wrong | R... http://www.huffingtonpost.com/randy-krum/false-visualization...
1 of 2 8/30/14, 10:00 AM
take away 2
literacies
visual & numerical
Tamas Nepusz (2008): Visualization of the relationships among artists in the last.fm database > http://sixdegrees.hu/
Renzo Piano: Renovation & expansion Isabella Stewart Gardner Museum, Boston, U.S.
Max Fürbringer (1888): Diagrams representing the “Phylogenetic Tree of Birds”
M. Stefaner et al. (2009): http://well-formed.eigenfactor.org
Portolan chart of the Atlantic Coastline by Grazioso Benincasa (15th ct) Joel Katz (2002): straight line map, Pennsylvania Department of Transportation
take away 3
visualizations
entail
compromise
same data rendered with
different layout algorithms
same data rendered with
same layout algorithm twice
same statistical measures
different representations
take away 4
graphical
standards
The Lady and the Unicorn: Sight, 15th ct.
Print of the Portuguese rhino by Albrecht Dürer, 1515
http://gmaps-samples.googlecode.com/svn/trunk/poly/puzzledrag.html
[email protected] www.isabelmeirelles.com
thanks!
ARTS HUMANITIES
June 3, 2014 Berkeley, California
5th LEONARDO SATELLITE SYMPOSIUM
COMPLEX NETWORKS