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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938578/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938583/pasted-from-clipboard.png)
Heer, J and B. Shneiderman, “Interactive Dynamics for Visual Analysis:A taxonomy of tools that support the fluent and flexible use of visualizations”
"Exploratory"
"Explanatory"
Visualization Goals
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943138/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943153/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939477/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938674/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938687/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939021/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939023/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938690/pasted-from-clipboard.png)
Sometimes, we start from small and zoom out.
Sort and Filter
and search!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942081/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938708/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938714/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938743/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939572/pasted-from-clipboard.png)
Unusual Filter Designs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939037/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939627/pasted-from-clipboard.png)
Kai Chang @syntagmatic http://bl.ocks.org/syntagmatic/raw/3150059/
Filter By Legend (Increasingly Common)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939585/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939593/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938719/pasted-from-clipboard.png)
Details on Demand
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938761/pasted-from-clipboard.png)
Tooltips are an amazing opportunity... don't waste them!
Tooltips with little charts!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938766/pasted-from-clipboard.png)
Pitch Interactive for
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1938768/pasted-from-clipboard.png)
Incredibly useful during development / exploration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943232/pasted-from-clipboard.png)
Example for my class using simple "title" field in svg for "fake tooltips"
Small Multiples
perform both overview & detail functions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939011/pasted-from-clipboard.png)
Can even be sorted, too!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939007/pasted-from-clipboard.png)
Coordinated, linked views
For multidimensional exploration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939027/pasted-from-clipboard.png)
Linked Across the Small Multiples
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939425/pasted-from-clipboard.png)
Time Linked to Place
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939072/pasted-from-clipboard.png)
http://mbtaviz.github.io/ by Mike Barry and Brian Card
Linked at annotation layer too
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939080/pasted-from-clipboard.png)
Exploratory Tools
Storytelling
Techniques
UI Mechanism:
"Steppers"
Switching to mostly "explanatory" design tips now....
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939520/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939598/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939527/pasted-from-clipboard.png)
Tableau's Story Points
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1941739/pasted-from-clipboard.png)
Storytelling
UI Mechanism:
Scrolling, or "Scrollytelling"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939646/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939663/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939667/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942957/pasted-from-clipboard.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942364/pasted-from-clipboard.png)
Storytelling
UI: The Annotation Layer
Text labels and callouts are NOT second class design elements.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939717/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939744/pasted-from-clipboard.png)
True in Static and Interactives
Links from text to key views
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939751/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943166/pasted-from-clipboard.png)
Storytelling
Mechanism: Movies (animation of events, or actual video / gif included)
Chris Whong http://nyctaxi.herokuapp.com/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942131/pasted-from-clipboard.png)
Small Data in Action
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942138/pasted-from-clipboard.png)
Video Segments
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942295/pasted-from-clipboard.png)
Tiny animations are taking off too...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943060/pasted-from-clipboard.png)
Storytelling
Methods: Personalization
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939728/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939731/pasted-from-clipboard.png)
You set up your own model.
You are the graphic.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942325/pasted-from-clipboard.png)
Storytelling
Methods:
"Recast" / "Rescale" / "Regroup"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939758/pasted-from-clipboard.png)
Democrats vs. Republicans
(heavy use of annotation layer)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939760/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943089/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943080/pasted-from-clipboard.png)
Overall vs. Small Multiples
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943082/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939806/pasted-from-clipboard.png)
Where would 10.8 million displaced Syrians fit?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939773/pasted-from-clipboard.png)
An actual rescale - log / linear
Storytelling
Methods: Simulation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939735/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939753/pasted-from-clipboard.png)
What's Your Goal?
Tell a story...
or build a tool?
Back up a bit:
Finding a story
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1941889/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1941890/pasted-from-clipboard.png)
From A Kirk's Data Visualization: A Successful Design Process (2012)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942019/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942027/pasted-from-clipboard.png)
Entries to the Hollywood contest from Information is Beautiful in 2012 - most are dead links now btw.
In Excel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1941916/pasted-from-clipboard.png)
It is the most profitable film ever made, based on return on investment
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1941997/pasted-from-clipboard.png)
James Fisher's entry, not online anymore (repo)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942005/pasted-from-clipboard.png)
An inconvenient truth
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1942978/pasted-from-clipboard.png)
With interactives, you don't need a ladder, geez.
Al Gore screencap from "An Inconvenient Truth", thanks to Moritz Stefaner
"Martini Glass" Structure
Author
Reader
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939865/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943044/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943049/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1943125/pasted-from-clipboard.png)
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://s3.amazonaws.com/media-p.slid.es/uploads/379414/images/1939881/pasted-from-clipboard.png)
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