introduction to visualization

Juice, Inc.©2016

Chris GemignaniPrincipalchris@juiceanalytics.com

Zach GemignaniPrincipalzach@juiceanalytics.com

Introduction to Visualization

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

goingtorain.com

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

www.chartchooser.com

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

Copyright 2010 Stanford Visualization Group

Contrast

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: chrisgemignanichris@juiceanalytics.com

Zach Gemignanitwitter: zachgemignanizach@juiceanalytics.com

Juice, Inc.©2016