See the Data, Be the Data
-
Upload
juan-sanchez -
Category
Technology
-
view
3.250 -
download
0
description
Transcript of See the Data, Be the Data
Code and Slides:http://thillerson.googlecode.com
See the Data, Be the DataTony HillersonSoftware Architect
Juan SanchezExperience Architect
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
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.”
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
This is Your Data
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
This is Your Data “Visualized”
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Data Visualization as a Medium
“Data visualization is another medium, just like music, graphic design or television.”
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Data Visualization as a Medium
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Data Visualization as a Medium
Code and Slides:http://thillerson.googlecode.com
Principles: GoalsWhy Look at Pictures of Data?
Code and Slides:http://thillerson.googlecode.com
Goals: Put the Data on Display
The Data Drives the Design, Not the Other Way Around
Code and Slides:http://thillerson.googlecode.com
Subway Map
Code and Slides:http://thillerson.googlecode.com
Goals: Put the Data on Display
Viewers Should Respond to the Content, Not Critique the Design
Code and Slides:http://thillerson.googlecode.com
Goals: Show Causality
Visually Represent the Relationships in the Data
Code and Slides:http://thillerson.googlecode.com
Find the match
a a aaa aaa
1 2 3 4
5 6 7 8
Code and Slides:http://thillerson.googlecode.com
Did you !nd the match?
a a aaa aaa
1 2 3 4
5 6 7 8
Code and Slides:http://thillerson.googlecode.com
Stories: Small Multiples
Code and Slides:http://thillerson.googlecode.com
Goals: Multiple Levels of Evidence
Most Interesting Problems Involve LOTS of Variables
Code and Slides:http://thillerson.googlecode.com
Goals: Multiple Levels of Evidence
Multivariate: Three or More Variables
Code and Slides:http://thillerson.googlecode.com
Consumer Electronics
Code and Slides:http://thillerson.googlecode.com
Goals: Don’t Lie
Pay Attention to Proportion
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Image vs. TextWall Street Journal: Commodity Trading
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Image vs. TextWall Street Journal Juan and Tony: Commodity Trading
1976 $4,000,000,000
2007 $4,780,000,000,000
Code and Slides:http://thillerson.googlecode.com
Goals: Encourage Exploration
Exploration Can be Physically Passive
Code and Slides:http://thillerson.googlecode.com
Name that font.
a a
Code and Slides:http://thillerson.googlecode.com
Name that font.
a aTimes Arial
Code and Slides:http://thillerson.googlecode.com
What’s the difference?
a a
Code and Slides:http://thillerson.googlecode.com
What’s the difference?
aa
Code and Slides:http://thillerson.googlecode.com
How this applies.
Code and Slides:http://thillerson.googlecode.com
Principles: Graphic TypesFour basic data visualization categories
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Data Map
Gives the Data a Location,Gives the Data a Home
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Data Map
Lets the Data’s StoryHit Close to Home
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Data Map
Time Magazinehttp://www.time.com/time/covers/20061030/where_we_live/
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Data Map
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Time Series
Time is a Measure of Change
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Time Series
A Time Series is a Measurement of Changes
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Time Series
Most Common Type of Graphic
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Time Series
May or May Not Show Causality
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Time Series
AAPL stock prices for 2008http://!nance.google.com
Code and Slides:http://thillerson.googlecode.com
Exposes the Relationship Between Two or More Things
Graphic Types: Relational Graphics
Code and Slides:http://thillerson.googlecode.com
Starting Point in the Search for Causality
Graphic Types: Relational Graphics
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Relational Graphics
Mars Soil Sampleshttp://www2.jpl.nasa.gov/snc/mpfscience.html
Code and Slides:http://thillerson.googlecode.com
Tells a Story in Time and Space
Graphic Types: Space-Time Narrative
Code and Slides:http://thillerson.googlecode.com
Less Common, butVery Compelling
Graphic Types: Space-Time Narrative
Code and Slides:http://thillerson.googlecode.com
Highly Multivariate
Graphic Types: Space-Time Narrative
Code and Slides:http://thillerson.googlecode.com
Graphic Types: Space-Time Narrative
Carte Figurative - Charles Minardhttp://en.wikipedia.org/wiki/Charles_Joseph_Minard
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
What is Best?
• Image or Text?
• Out-of-the-Box or Custom?
• Drill Down or Static?
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Image vs. TextNew York Times: Diabetes by Age
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
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
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Out-of-the-Box vs. CustomOlympic Medals won: Out of the Box
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
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
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Drilldown vs. StaticQuietly Scheming: Drilldown
Quietly Scheminghttp://demo.quietlyscheming.com/drillDown/app.html
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Drilldown vs. StaticMovie Sales: Static
Xach.comhttp://xach.com/moviecharts/2008.html
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
That’s great, but where do you start?
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
What is the Goal?
• Hypothesis : London Cholera Outbreak
• Data Exploration : Real Estate Trends
• Visual Exploration : Radiohead
• Add gloss to “boring” data :-(
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
HypothesisLondon Cholera Outbreak: 1854
Dr. John Snow didn’t believe the theory of the day: Diseases were contracted by breathing “bad air”
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
HypothesisLondon Cholera Outbreak: 1854
Dr. Snow interviewed locals and graphed the locations of the the deaths:
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Juan, this is ugly, but it’s a placeholder
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Data ExplorationReal Estate Trends : Trulia
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Visual ExplorationRadiohead : Geometric Informatics
Code and Slides:http://thillerson.googlecode.com
Code and Slides:http://thillerson.googlecode.com
Make It GlossySpectra Visual Newsreader
Code and Slides:http://thillerson.googlecode.com
Playful InsightSometimes experimenting with an artful approach yields interesting results.
Code and Slides:http://thillerson.googlecode.com
Pictures of Songs
• Visualizing Music : Anita Lillie
• Based on time, pitch and timbre
Beethoven's "Moonlight" Sonata
Code and Slides:http://thillerson.googlecode.com
Visualizing Music : Video
Code and Slides:http://thillerson.googlecode.com
Beethoven, Fur Elise
Code and Slides:http://thillerson.googlecode.com
Nirvana, Come As You Are
Code and Slides:http://thillerson.googlecode.com
Where do you Start?
• Review the data
• Establish rough concepts
• Wireframe/Mockup
• Assign “meaning” to data points
• Collaborate with developer on the “vision”
Code and Slides:http://thillerson.googlecode.com
Less Talk, More RockSo... Let’s see some examples.
Code and Slides:http://thillerson.googlecode.com
Napolean’s InvasionThe moral of the story is...
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
Charles Joseph Minard 1781 - 1870
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
June 24, 1812The Story Begins
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
The Turning Point
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
Disaster
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
The Point
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
Pay Attention to Precision!1mm = 6000 men
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
Six Variables!•Time•2D Position (2)•Troop Strength•Army Direction•Temperature
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
The Lesson
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
“Never Get Involved in a Land War in Asia”
Code and Slides:http://thillerson.googlecode.com
Stories: Napolean’s Invasion of Russia
“Never Get Involved in a Land War in Asia”
Code and Slides:http://thillerson.googlecode.com
Code, Because we Love Youhttp://github.com/thillerson/preso_code
Code and Slides:http://thillerson.googlecode.com
Where hast Doug Been?Good question...
Code and Slides:http://thillerson.googlecode.com
Where hast Doug been?
• Doug McCune is crazy
• GPS data from his phone every 5 minutes
• We have this data
• Let’s use it!
Code and Slides:http://thillerson.googlecode.com
Just how busy are we?Juan and Tony work like madmen, or do they?
Code and Slides:http://thillerson.googlecode.com
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
Code and Slides:http://thillerson.googlecode.com
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.)
Code and Slides:http://thillerson.googlecode.com
Resources
• !owingdata.com
• infosthetics.com
• visualcomplexity.com
• edwardtufte.com
• Tony’s blog: thillerson.blogspot.com
• Juan’s blog: scalenine.com/blog/
We’re hiring