Design For Interactive Data Visualization

Lynn Cherny

Visiting Knight Chair at UM School of Communication

Slides: https://ghostweather.slides.com/lynncherny

Overview first, zoom and filter, then details-on-demand  

Overview first, zoom and filter, then details-on-demand  

Overview first, zoom and filter, then details-on-demand  

Overview first, zoom and filter, then details-on-demand  

Overview first, zoom and filter, then details-on-demand   Overview first, zoom and filter, then details-on-demand   Overview first, zoom and filter, then details-on-demand   Overview first, zoom and filter, then details-on-demand   Overview first, zoom and filter, then details-on-demand   Overview first, zoom and filter, then details-on-demand

Ben Shneiderman’s Infovis "mantra" (1996)

The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations

Shneiderman, B. 1996

click down to

go into a topic!

Heer & Shneiderman (2012) 

Heer, J and B.  Shneiderman, “Interactive Dynamics for Visual Analysis:A taxonomy of tools that support the fluent and flexible use of visualizations” 

http://queue.acm.org/detail.cfm?id=2146416

"Exploratory" 

"Explanatory"

Visualization Goals

http://blogger.ghostweather.com/2013/11/data-vis-consulting-advice-for-newbies.html

Moritz Stefaner's Map of the Vis Design Process (2013)

Exploratory

Explanatory

Excel

Python

R / Shiny

Tableau

SAS/SPSS

 

 

 

Illustrator

Javascript / D3.js

R (ggplot2)

Tableau

(Jupyter / IPython notebook)

 

 

 

 

"interactives" / "infographics"

/ "articles"

"data sketches" / notes /

sometimes

scientific publications

A Map for Interactives

  • Overview and Zoom
  • Sort and Filter
  • Details on Demand
  • Small Multiples
  • Linked Views
  • Storytelling Techniques
    • UI: Steppers
    • UI: Scrolling
    • UI: Animated Transitions
    • UI: Annotation
    • Method: Personalization
    • Method: Recast / Rescale / Regroup
    • Method: Movies
    • Method: Simulation
  • Are you building a story, or building a tool?

Overview and Zoom

www.nytimes.com/interactive/2014/11/04/upshot/senate-maps.html?_r=4

http://www.nytimes.com/interactive/2014/06/05/upshot/how-the-recession-reshaped-the-economy-in-255-charts.html?abt=0002&abg=0

Sometimes, we start from small and zoom out.

http://www.nytimes.com/interactive/2014/09/14/sports/baseball/jeter-swings.html?_r=1

Sort and Filter

 

and search!

http://www.theguardian.com/us-news/ng-interactive/2015/jun/01/the-counted-map-us-police-killings

http://www.npr.org/blogs/money/2014/08/27/343415569/whos-in-the-office-the-american-workday-in-one-graph

http://www.nytimes.com/interactive/2012/09/14/us/how-the-chicago-public-school-district-compares.html

Data Comb by Chris Polis

Unusual Filter Designs

http://graphics.wsj.com/from-pluto-to-the-sun/

Crossfilter airline data demo:  http://square.github.com/crossfilter/, and look up dc.js for using it better.

Linked Exploratory Query Tools (Related to Filtering)

Parallel Coordinates:

Another Exploratory Tool

Kai Chang @syntagmatic http://bl.ocks.org/syntagmatic/raw/3150059/

Filter By Legend (Increasingly Common)

http://mollica.space/scattered-well-being/

https://plot.ly/~PewResearch/4/percentage-of-american-adults-18-who-own-each-device/

http://www.tableausoftware.com/learn/gallery

Details on Demand

Tooltips are an amazing opportunity... don't waste them!

http://www.popsci.com/cocktail-calculus-chart-inner-workings-recipes

Tooltips with little charts!

Pitch Interactive for 

http://www.thenation.com/afghanistan-database

http://www.nytimes.com/interactive/2014/06/05/upshot/how-the-recession-reshaped-the-economy-in-255-charts.html?abt=0002&abg=0

Incredibly useful during development / exploration

Example for my class using simple "title" field in svg for "fake tooltips"

Small Multiples

perform both overview & detail functions

http://woodchanges.com/

Can even be sorted, too!

http://terror.periscopic.com/

Coordinated, linked views

For multidimensional exploration

 

http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html

Linked Across the Small Multiples

http://www.nytimes.com/interactive/2012/08/24/us/drought-crops.html

Time Linked to Place

http://mbtaviz.github.io/ by Mike Barry and Brian Card

Linked at annotation layer too

http://mbostock.github.com/d3/talk/20111116/iris-splom.html

Exploratory Tools

Storytelling

Techniques

UI Mechanism:

"Steppers"

Switching to mostly "explanatory" design tips now....

http://www.nytimes.com/interactive/2012/09/20/world/africa/the-attack-on-the-american-mission-in-benghazi-libya.html

http://ig.ft.com/features/baseline/every-premier-league-squad-compared-graphic/

http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

Tableau's Story Points

http://www.tableau.com/about/blog/2014/5/82-preview-tell-story-your-data-story-points-30761

Storytelling

UI Mechanism: 

Scrolling, or "Scrollytelling"

http://www.bloomberg.com/graphics/2015-whats-warming-the-world/

http://www.nytimes.com/interactive/2014/06/05/upshot/how-the-recession-reshaped-the-economy-in-255-charts.html?abt=0002&abg=0

http://www.facesoffracking.org/data-visualization/

FYI, The  Peanut Gallery does not love scrollytelling.

See also the anonymous famous NYT graphics team member quote in Jim Vallandingham's Openvis talk So You Think You Can Scroll

Storytelling

 

UI Trick: Animated Transitions

[Experiments] found significant advantages for animation across both syntactic and semantic tasks, providing strong evidence that, with careful design, animated transitions can improve graphical perception of changes between statistical data graphics.

"Animated Transitions in Statistical Data Graphics" (Heer & Robertson 2007)

http://vis.stanford.edu/files/2007-AnimatedTransitions-InfoVis.pdf

http://ig.ft.com/features/baseline/surface-tension-in-tennis/

Storytelling

UI: The Annotation Layer

Text labels and callouts are NOT second class design elements.

http://www.washingtonpost.com/wp-srv/special/politics/state-vs-federal-exchanges/

http://www.nytimes.com/interactive/projects/cp/summer-of-science-2015/latest/how-often-is-bmi-misleading

True in Static and Interactives

Links from text to key views

How To Integrate Text and Images With Interactivity

9 Things I Learned from Doing Mainstream Data Journalism by Anna Leach

Storytelling

Mechanism: Movies (animation of events, or actual video / gif included)

Chris Whong http://nyctaxi.herokuapp.com/

Small Data in Action

http://www.theguardian.com/world/ng-interactive/2014/aviation-100-years

Video Segments

Tiny animations are taking off too...

http://www.nytimes.com/interactive/science/space/keplers-tally-of-planets.html

http://www.nytimes.com/interactive/2012/11/11/sunday-review/counties-moving.html#

Storytelling

Methods: Personalization

http://www.theguardian.com/society/ng-interactive/2015/sep/02/unaffordable-country-where-can-you-afford-to-buy-a-house

http://www.oecdbetterlifeindex.org/#/11111312433

You set up your own model.

You are the graphic.

http://www.nytimes.com/interactive/2011/07/29/us/politics/20110729-debt-matrix.html

Storytelling

Methods:  

"Recast" / "Rescale" / "Regroup"

http://www.nytimes.com/interactive/2012/10/05/business/economy/one-report-diverging-perspectives.html?_r=1

Democrats vs. Republicans

(heavy use of annotation layer)

http://www.bloomberg.com/politics/graphics/2014-incumbent-governors/?hootPostID=031ede1ff3806f5956e7bdadac068a20

Overall vs. Small Multiples

http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html

Where would 10.8 million displaced Syrians fit?

http://projects.aljazeera.com/2013/syrias-refugees/index.html#42.360482/-71.059568

http://www.nationalgeographic.com/astrobiology/goldilocks-worlds/

An actual rescale - log / linear

Storytelling

Methods: Simulation

http://fivethirtyeight.com/features/prison-reform-risk-assessment/?ex_cid=story-twitter

http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html

What's Your Goal?

Tell a story...

or build a tool?

Back up a bit:

Finding a story

From A Kirk's Data Visualization: A Successful Design Process (2012)

Gordon Chan's entry

Tom Evans' project

Entries to the Hollywood contest from Information is Beautiful in 2012 - most are dead links now btw.

In Excel

http://blogger.ghostweather.com/2014/05/data-characters-in-search-of-author.html

It is the most profitable film ever made, based on return on investment

—Wikipedia

James Fisher's entry, not online anymore (repo) 

An inconvenient truth

With interactives, you don't need a ladder, geez.

Al Gore screencap from "An Inconvenient Truth", thanks to Moritz Stefaner

"Martini Glass" Structure

"Narrative Vis: Telling Stories with Data," Segel & Heer (2010)

Author

Reader

http://peopleviz.gforge.inria.fr/trunk/data_blog/environment/co2_FR/index_storytelling.php

http://www.nytimes.com/interactive/2013/04/16/science/disease-overlap-in-elderly.html

So, both explantory and exploratory are possible!

  • Overview and Zoom
  • Sort and Filter
  • Details on Demand
  • Small Multiples
  • Linked Views
  • Storytelling Techniques
    • UI: Steppers
    • UI: Scrolling
    • UI: Animated Transitions
    • UI: Annotation
    • Method: Personalization
    • Method: Recast / Rescale / Regroup
    • Method: Movies
    • Method: Simulation
  • Are you building a story, or building a tool?

https://openvisconf.com/

Thanks!

Lynn Cherny / @arnicas

lynn@cherny.com

openvisconf.com

Take my class next semester if you're a UM student.

Slides: https://ghostweather.slides.com/lynncherny

Design for Interactive Data Vis

By Lynn Cherny

Design for Interactive Data Vis

An introductory talk on interactive visualization principles, particularly applicable to journalism. Lots of examples.

  • 16,967

More from Lynn Cherny