learning from constraints in information visualizations2014/06/03 · information visualization...

Learning from constraints in information visualizationsIsabel Meirelles | [email protected]

Associate Professor, Graphic Design, Northeastern University

DH Forum 2014 The University of Kansas Sept.13

mailto:[email protected]

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


Information taxonomy by Floridi


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

(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

http://www.moma.org/interactives/exhibitions/2012/inventingabstraction/?page=connections

14th-ct.: Dichotomy 2004: Josh On <www.theyrule.net>

http://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



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

Email

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




ADVERTISEMENT






















/POLITICS/)


/BUSINESS/)


/ENTERTAINMENT/)


/TECHNOLOGY/)



/ARTS/)





























(/users/login/)

























HOT ON THE BLOG


August 30, 2014







(javscript:void(0))

11


Share

10


Tweet

5


Email

0

Comment


1 of 2 8/30/14, 10:00 AM

CLOSE




ADVERTISEMENT






















/POLITICS/)


/BUSINESS/)


/ENTERTAINMENT/)


/TECHNOLOGY/)



/ARTS/)





























(/users/login/)

























HOT ON THE BLOG


August 30, 2014







(javscript:void(0))

11


Share

10


Tweet

5


Email

0

Comment


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/

http://sixdegrees.hu/last.fm/index.html

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

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

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

mailto:[email protected]

http://www.isabelmeirelles.com

http://amzn.to/145tqSQ

http://ahcncompanion.info/

http://amzn.to/13fHXFf

learning from constraints in information visualizations2014/06/03 · information visualization...

Documents