See the Data, Be the Data

Code and Slides:http://thillerson.googlecode.com

See the Data, Be the DataTony HillersonSoftware Architect

Juan SanchezExperience Architect



What is Data Visualization?

“Visualization is the graphical presentation of information, with the goal of providing the viewer with a qualitative understanding of the information contents.”



This is Your Data



This is Your Data “Visualized”



Data Visualization as a Medium

“Data visualization is another medium, just like music, graphic design or television.”



Data Visualization as a Medium


Principles: GoalsWhy Look at Pictures of Data?


Goals: Put the Data on Display

The Data Drives the Design, Not the Other Way Around


Subway Map


Goals: Put the Data on Display

Viewers Should Respond to the Content, Not Critique the Design


Goals: Show Causality

Visually Represent the Relationships in the Data


Find the match

a a aaa aaa

1 2 3 4

5 6 7 8


Did you !nd the match?

a a aaa aaa

1 2 3 4

5 6 7 8


Stories: Small Multiples


Goals: Multiple Levels of Evidence

Most Interesting Problems Involve LOTS of Variables


Goals: Multiple Levels of Evidence

Multivariate: Three or More Variables


Consumer Electronics


Goals: Don’t Lie

Pay Attention to Proportion



Image vs. TextWall Street Journal: Commodity Trading



Image vs. TextWall Street Journal Juan and Tony: Commodity Trading

1976 $4,000,000,000

2007 $4,780,000,000,000


Goals: Encourage Exploration

Exploration Can be Physically Passive


Name that font.

a a


Name that font.

a aTimes Arial


What’s the difference?

a a


What’s the difference?

aa


How this applies.


Principles: Graphic TypesFour basic data visualization categories


Graphic Types: Data Map

Gives the Data a Location,Gives the Data a Home



Lets the Data’s StoryHit Close to Home



Time Magazinehttp://www.time.com/time/covers/20061030/where_we_live/

http://www.time.com/time/covers/20061030/where_we_live/



Graphic Types: Time Series

Time is a Measure of Change



A Time Series is a Measurement of Changes



Most Common Type of Graphic



May or May Not Show Causality



AAPL stock prices for 2008http://!nance.google.com




Exposes the Relationship Between Two or More Things

Graphic Types: Relational Graphics


Starting Point in the Search for Causality




Mars Soil Sampleshttp://www2.jpl.nasa.gov/snc/mpfscience.html




Tells a Story in Time and Space

Graphic Types: Space-Time Narrative


Less Common, butVery Compelling



Highly Multivariate




Carte Figurative - Charles Minardhttp://en.wikipedia.org/wiki/Charles_Joseph_Minard





What is Best?

• Image or Text?

• Out-of-the-Box or Custom?

• Drill Down or Static?



Image vs. TextNew York Times: Diabetes by Age



Image vs. TextNew York Times Juan and Tony: Diabetes by Age

Under 20 0.2%

20 to 39 2.6%

40 to 59 10.8%

60 or over 23.8%

All ages 7.8



Out-of-the-Box vs. CustomOlympic Medals won: Out of the Box



Out-of-the-Box vs. CustomOlympic Medals won: Custom

New York Timeshttp://www.nytimes.com/interactive/2008/08/04/sports/

olympics/20080804_MEDALCOUNT_MAP.html

http://www.nytimes.com/interactive/2008/08/04/sports/olympics/20080804_MEDALCOUNT_MAP.html






Drilldown vs. StaticQuietly Scheming: Drilldown

Quietly Scheminghttp://demo.quietlyscheming.com/drillDown/app.html

http://demo.quietlyscheming.com/drillDown/app.html

http://demo.quietlyscheming.com/drillDown/app.html



Drilldown vs. StaticMovie Sales: Static

Xach.comhttp://xach.com/moviecharts/2008.html

http://xach.com/moviecharts/2008.html

http://xach.com/moviecharts/2008.html



That’s great, but where do you start?



What is the Goal?

• Hypothesis : London Cholera Outbreak

• Data Exploration : Real Estate Trends

• Visual Exploration : Radiohead

• Add gloss to “boring” data :-(



HypothesisLondon Cholera Outbreak: 1854

Dr. John Snow didn’t believe the theory of the day: Diseases were contracted by breathing “bad air”



HypothesisLondon Cholera Outbreak: 1854

Dr. Snow interviewed locals and graphed the locations of the the deaths:



Juan, this is ugly, but it’s a placeholder



Data ExplorationReal Estate Trends : Trulia

http://www.trulia.com/explore/






Visual ExplorationRadiohead : Geometric Informatics

http://code.google.com/creative/radiohead/






Make It GlossySpectra Visual Newsreader

http://www.msnbc.msn.com/id/24207533

http://www.msnbc.msn.com/id/24207533

http://msnbcmedia.msn.com/i/msnbc/components/spectra/spectra.html




Playful InsightSometimes experimenting with an artful approach yields interesting results.


Pictures of Songs

• Visualizing Music : Anita Lillie

• Based on time, pitch and timbre

Beethoven's "Moonlight" Sonata


Visualizing Music : Video


Beethoven, Fur Elise

http://www.flyingpudding.com/projects/viz_music/



Nirvana, Come As You Are




Where do you Start?

• Review the data

• Establish rough concepts

• Wireframe/Mockup

• Assign “meaning” to data points

• Collaborate with developer on the “vision”


Less Talk, More RockSo... Let’s see some examples.


Napolean’s InvasionThe moral of the story is...


Stories: Napolean’s Invasion of Russia

Charles Joseph Minard 1781 - 1870



June 24, 1812The Story Begins



The Turning Point



Disaster



The Point



Pay Attention to Precision!1mm = 6000 men



Six Variables!•Time•2D Position (2)•Troop Strength•Army Direction•Temperature



The Lesson



“Never Get Involved in a Land War in Asia”


Code, Because we Love Youhttp://github.com/thillerson/preso_code


Where hast Doug Been?Good question...


Where hast Doug been?

• Doug McCune is crazy

• GPS data from his phone every 5 minutes

• We have this data

• Let’s use it!


Just how busy are we?Juan and Tony work like madmen, or do they?


Just how busy are we?

• Used RescueTime to log or productivity(or lack there of)

• Scraped the data from RescueTime

• Come up with ways to visualize the data

• Answer some questions


What’s the Point?

Get Meaningful Data,Let It Tell the Story,Your Audience is Smarter,And the World Becomes a Better Place(Do it for the kids.)


Resources

• !owingdata.com

• infosthetics.com

• visualcomplexity.com

• edwardtufte.com

• Tony’s blog: thillerson.blogspot.com

• Juan’s blog: scalenine.com/blog/

We’re hiring

See the Data, Be the Data

Technology

Transcript of See the Data, Be the Data