Interaction Examples

by Mike Gleicher on March 13, 2017

Non-Interactive

Chiccago Homicide Rate (NOT interactive – uses a callout for story)

  • pick the view – so viewer doesn’t have to

Thanksgiving Flight Pattners

  • just animation (somewhat gratuitous / redundant)

Where shows are popular – Limited Interaction (menu to pick a map)

  • Why did they do it this way?
  • what other interactions might you want? (find this one)

Untangling Spaghetti

NGRAMs original spaghetti

  • needs to be sufficiently tall

Making Gammy History (spaghetti plot – exposes hidden stuff on hover)

  • detail on demand
  • readability cure

Detail on Demand

Impact of Obamacare

  • Juxtapose cloropleth map w/detail on hover

NBA Correllogram -> Scatterplot

  • details on demand w/click and hover

 

Switch Data / Detail on Demand

NY Times – stream graphs of state migration

  • detail (readability) on demand
  • switch data / view

Vornoi Tree map of state migration

  • switch data
  • detail (story readability) on demand

Interactive Experimentation

538 P-Hacking (interactive machinery)

  • encourage exploration and tinkering

Social Security

  • first page, various things with mousovers
  • 2nd page, interactive experiment

Basic Charts Brought to Life (Pan, Zoom, Detail, …)

VEP Demos

  • Non Interactive Scatterplots
  • Interactive Scatterplots
  • Detail on demand
  • Selection in the browser (sorting etc in browser)
  • pan/zoom

Pan, Zoom + Detail

Claudio’s Shadows Thing (need to turn off Ghostery)

  • pan/zoom
  • switch data
  • detail on hover

Life Expectancy (vs poverty & geography)

  • Chloropleth map with pan zoom
  • Hover for details on demand
  • Images really don’t tell story (good design challenge problem!)

Scrollable Narratives (Progressive Reveal)

Voting Habits

  • Animated story as scroll

How the recession shaped the economy

  • scrollable narrative, interactions at each step
  • really about story telling from spaghetti

Not Necessarily for Class

Explorable Explanations

  • examples aren’t as good as i would hope

 

Previous post:

Next post: