introduction to visualization
TRANSCRIPT
we craft applications that make using data enjoyable
and rewarding
Juice, Inc.©2016
Juice, Inc.©2016
Don’t be accidental
Have a message
Keep it simple
Provide context
Apply design fundamentals
Have a message
Juice, Inc.©2016
“Perfection is achieved, not when there’s nothing more to add, but when there is
nothing left to take away.”
Antoine de Saint-Exupéry
Squelch the noise
Juice, Inc.©2016
Juice, Inc.©2016
Show only what’s needed - nothing more
Juice, Inc.©2016
Leaders
Laggers
Norms
Historical Tendencies
Internal drivers
External drivers
Who’s the model?
Who needs coaching?
Who’s out of line?
Is change happening?
What’s driving?
Whose related?
Align your charts with your intent
Juice, Inc.©2016
One metric across many categories
Relationships across
categories
Outliers
Find leaders, laggers, and anchorsby using: Comparisons and Distributions
Juice, Inc.©2016
Metric for one category across time
Who is changin
g
Transitions
Find historical tendenciesby using: Trends
Juice, Inc.©2016
Metric with subcomponents
Factors driving chang
e
Discover internal driversby using: Compositions
Year
Juice, Inc.©2016
Clustering
Outliers
Discover external driversby using: Relationships
Many metrics for many categories
Juice, Inc.©2016
Keep it simple
Juice, Inc.©2016
...with ‘simplistic’ ”
Garr Reynolds
“Don’t confuse ‘simple’...
Juice, Inc.©2016
Surveying the results of psychological experiments in the 1950s
“My problem is that I have been persecuted by an integer.”
Juice, Inc.©2016
Binary digits Numbers Letters + Digits Short words Long words0
2
4
6
8
10
Number of items we can recall
Juice, Inc.©2016
2,147,483,648 bytes
Juice, Inc.©2016
2,147,483,648 bytes
7digits5 one syllable words2 seconds audio3 visual images
Juice, Inc.©2016
Computer You0
1,000,000,000
2,000,000,000
3,000,000,000
Working memory capacity
Juice, Inc.©2016
“Easy is hard”Pat Hanrahan
Juice, Inc.©2016
Without context: 100 people, 100 conclusions
Context gives data meaning
Juice, Inc.©2016
career home runs*762
career home runs*
Juice, Inc.©2016
762
Barry Lamar Bonds
HENRY
“HANK”
AARON762career home runs
*
Juice, Inc.©2016
284 +4.5% v. last month-2.8% v. goal
comparison to previous time period
and goal
Q1 2009 Q2 2009 Q3 2009 Q4 20090
100
200
300
400Goal Actual
shown within broader context of overall trend and goals
relevant scopein Q3 2009new leadsmetric name
the new “Vortex” marketing campaign drove new leads after a slow Q2
explanation of mitigating factors
Types of data context
Juice, Inc.©2016
People context
Chief Marketing OfficerMarketing Analyst
How does the data fit into my workflow?
What expectations or assumptions do I
have?
How do I interpret the metric?
What other information am I looking at? Does it support or contradict?
Who is sharing the data? Do they have
credibility?
Juice, Inc.©2016
Treemaps
Sparklines
Small multiples
3 visualization techniques worth knowing
Juice, Inc.©2016
See the full picture
Biggest segments
Movers
See detail
Treemaps: The cure for big data display
Juice, Inc.©2016
Spending by category/line item
Juice, Inc.©2016
Sales by title, retailer
Juice, Inc.©2016
Sparklines
“Small high-resolution graphics usually embedded in a full context of words, numbers, images. Sparklines as datawords: data-intense, design-simple, word-sized graphics.”
- Edward Tufte20.59%Direct Traffic
word-sized graphics
Juice, Inc.©2016
Sparklines add context
Comparison of values
Juice, Inc.©2016
Sparklines add context
Trend
Juice, Inc.©2016
Sparklines add context
Highest and lowest values
Juice, Inc.©2016
Sparklines add context
Comparison to a goal
Juice, Inc.©2016
Step 1
Step 2
Small multiples
Create a simple chart
Replicate the chart for related parameters using the same structure and scale
Juice, Inc.©2016
http://www.nytimes.com/interactive/2009/04/16/us/20090419-Agency-Suburbs.html
displayed by CITY
NY Timesstorytelling with small multiples
Juice, Inc.©2016
http://www.nytimes.com/interactive/2008/05/30/sports/playmagazine/20080601_WOODS_GRAPHIC.html
displayed by METRIC
NY Timesstorytelling with small multiples
Apply design fundamentals
Juice, Inc.©2016
Looks matter.
Juice, Inc.©2016
Right and wrong in data visualization
Juice, Inc.©2016
6 principles describe how we determine visual context
1) Principle of ProximityThings that are spatially close belong to a group
Juice, Inc.©2016
1) Principle of ProximityThings that are spatially close belong to a group
Juice, Inc.©2016
2) Principle of SimilarityThings that are spatially close belong to a group
Juice, Inc.©2016
3) Principle of EnclosureObjects that are enclosed by a shape will be seen as a group
Juice, Inc.©2016
3) Principle of EnclosureObjects that are enclosed by a shape will be seen as a group
Juice, Inc.©2016
3) Principle of EnclosureObjects that are enclosed by a shape will be seen as a group
Juice, Inc.©2016
4) Principle of ClosureWe strive to perceive shapes as complete
Juice, Inc.©2016
4) Principle of ClosureWe strive to perceive shapes as complete
Juice, Inc.©2016
5) Principle of ContinuityObjects that are aligned are perceived as a group
Juice, Inc.©2016
6) Principle of ConnectionObjects that are connected are part of the same group
Juice, Inc.©2016
Things that are spatially close belong to a group
Proximity
SimilarityThings that share color, size or shape belong to a group
EnclosureObjects that are enclosed by a shape will be seen as a group
ClosureWe strive to perceive shapes as complete
ContinuityObjects that are aligned are perceived as a group
ConnectionObjects that are connected are part of the same group
Juice, Inc.©2016
Increase data-ink ratio(make every pixel tell a story about your data)
Fundamental rule of chart design
Reduce chartjunk(remove chart elements that are decorative or ornamental)
Juice, Inc.©2016
Remove chart-junk
Images courtesy of Tim Bray: http://www.tbray.org/ongoing/When/200x/2003/03/13/Data-Ink
Increase data-ink
Increase data-ink
Juice, Inc.©2016
Fundamental rules of table design
Increase data-ink ratio(make every character meaningful)
Reduce tablejunk(remove chart elements that are decorative or ornamental)
Juice, Inc.©2016
Reduce tablejunk
Juice, Inc.©2016
Reduce tablejunk
Juice, Inc.©2016
Reduce tablejunk
Juice, Inc.©2016
Objects that are aligned are perceived as a group
Principle of ProximityThings that are spatially close belong to a group
Principle of Continuity
Juice, Inc.©2016
Reduce tablejunk
Juice, Inc.©2016
Reduce tablejunk
Juice, Inc.©2016
Increase data-ink ratio
vJuice, Inc.©2016
Juice, Inc.©2016
Increase data-ink ratio
1 degree latitude = ~60 miles
.001 degree latitude = 300 feet
0.00000000000001 degree latitude = 1 micron, the width of a very small bacteria
Hence, the software must have been pirated by a bacteria
Juice, Inc.©2016
Increase data-ink ratio
Juice, Inc.©2016
Increase data-ink ratio
Juice, Inc.©2016
Increase data-ink ratio
Juice, Inc.©2016
Tables
Remove gridlines
Use lines or whitespace to separate areas that are conceptually different
Display the smallest amount of numbers that you can to support the needs of the table
Juice, Inc.©2016
Contrast
Use contrast to draw attention
Juice, Inc.©2016
Less effective
You can use color to emphasize text.You can bold-italics your important text.You can UPPERCASE your important text.You can underline your important text.
EmphasisYou can add italic letters.You can bold your important point.You can use color to emphasize text.You can combine effects.
Juice, Inc.©2016
Capital lettersMAY I CRAVE YOUR INDULGENCE TO OPEN THIS BUSINESS DISCUSSION BY A FORMAL LETTER OF THIS SORT. IT IS PERTINENT THAT BUSINESS OF THIS MAGNITUDE SHOULD HAVE COMMENCED PROPERLY WITH A FORMAL MEETING OF YOU AND US TO ENABLE US KNOW OURSELVES, HAVE A FORE KNOWLEDGE OF THE NATURE OF THE BUSINESS, DISCUSS AND ACQUAINT OURSELVES WITH THE RESPONSIBILITIES AND FUNCTIONS OF PARTIES CONCERNED, AND APPROPRIATE SHARES ACCORDINGLY. HOWEVER, FOR TIME FACTOR, CONFIDENTIALITY AND PERSONALITY OF PEOPLE INVOLVED HERE IN NIGERIA, WE CHOSE THIS APPROACH FOR THE REMITTANCE OF FIFTEEN MILLION, FIVE HUNDRED THOUSAND U.S DOLLARS (US$15.5M), PLEASE BEAR WITH US FOR MAKING THE INITIAL CONTACT THROUGH E-MAIL. BUT MY PARTNERS ARE INSISTING FOR A MEETING IN ORDER NOT TO FALL INTO A WRONG HAND AGAIN.
Juice, Inc.©2016
How we read
Aoccdrnig to rscheearch at Cmabrigde uinervtisy, it deosn't mttaer waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteres are at the rghit pclae. The rset can be a tatol mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by it slef but the wrod as a wlohe
http://blogs.msdn.com/fontblog/default.aspx?p=2Juice, Inc.©2016
THE QUICK BROWN FOX JUMPS OVER...
The quick brown fox jumps over ...
Juice, Inc.©2016
Juice, Inc.©2016
FontsWine
Juice, Inc.©2016
Juice, Inc.©2016
Reds
Whites
Hearty, earthy, jammy, rustic
Tart, sophisticated, citrusy, light
Juice, Inc.©2016
Juice, Inc.©2016
Serif
Sans-serif
Hearty, rustic, somber, dignified
Light, modern, smooth, simple hh
Serif
SerifJuice, Inc.©2016
Juice, Inc.©2016
Reds
Whites
Merlot, Shiraz, Cabernet Sauvignon, Pinot Noir
Chardonnay, Sauvignon Blanc, Riesling
Juice, Inc.©2016
Juice, Inc.©2016
Serif
Sans-serif
Georgia
Arial / Helvetica hhSerif
SerifVerdana / Tahoma
Times New RomanPalatino
Trebuchet
Juice, Inc.©2016
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
History of Medicine
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
Fonts - Simple rules
Juice, Inc.©2016
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
History of Medicine
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
Body TextClean readable text, 50-80% of your text will look like this.
•10-16pt•Arial or Georgia
Juice, Inc.©2016
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
History of Medicine
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
HeaderUse to separate and name sections
•150%-200% of body
Juice, Inc.©2016
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
History of Medicine
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
NotesAdditional things a user should be aware of
•85% of body•Lower contrast
Juice, Inc.©2016
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
History of Medicine
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
EmphasisDraw the eye to key points
•Same size as body•High-impact color/bold/italic
Juice, Inc.©2016
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
History of Medicine
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
EmphasisDraw the eye to key points
•Same size as body•High-impact color/bold/italic
Juice, Inc.©2016
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
History of Medicine
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
Juice, Inc.©2016
CategoricalLots of contrast between each adjacent color
SequentialColors can be ordered from low to high
Low High
DivergingTwo sequential schemes extended out from a critical midpoint value Low HighCritical
midpoint
http://colorbrewer2.org/
Color schemes for data
Juice, Inc.©2016
SequentialColors can be ordered from low to high
Low High
Juice, Inc.©2016
DivergingTwo sequential schemes extended out from a critical midpoint value Low HighCritical
midpoint
Juice, Inc.©2016
CategoricalLots of contrast between each adjacent color
Juice, Inc.©2016
Juice, Inc.©2016
Have a message
Keep it simple
Provide context
Apply design fundamentals
www.juiceanalytics.com@ juiceanalytics
Chris Gemignanitwitter: [email protected]
Zach Gemignanitwitter: [email protected]
Juice, Inc.©2016