A Tour through the Interaction Zoo

Here are the examples we looked through in class, grouped by the different categories of techniques. These categories are taken from a 2007 paper by Ji Soo Yi et al..

• Select: identify something as interesting
  • A simple click to select
  • Select on hover.
  • Selecting points on a map
  • Accelerated selection via a Voronoi diagram. D3 offers a module called d3-delaunay to compute these diagrams.
  • Generalized Selection via Interactive Query Relaxation and the accompanying research paper by Jeff Heer et al.
• Connect: show me related items
  • Brushing & Linking a scatterplot matrix. The equivalent visualization constructed with D3
  • How the Tax Burden Has Changed
• Abstract/Elaborate: show me more or less detail
  • Simple Tooltips
  • Direct dynamic labeling
  • DimpVis, hovering shows a timeline (in the style of a connected scatterplot) and points can be dragged along the timeline to navigate years
  • How the Recession Reshaped the Economy, in 255 Charts
  • Overview + Detail and the equivalent chart constructed with D3.
  • Interactive Re-Binning on Detail.
  • Gooey Exploding Scatterplot
• Filter: show me something conditionally
  • Query Widgets and an example constructed with Svelte
  • Job Voyager with regular expression text queries
  • Cross Filtering
  • Cross Filtering + Re-Aggregation
  • Zipdecode with highlighting and zooming based on each individual digit of a zip code.
  • Scented Widgets by Wesley Willett, Jeffrey Heer, Maneesh Agrawala
• Explore: show me something else
  • Geometric Zooming scales the pixel space. You’re moving closer to the marks, or the marks are moving closer to you (i.e., they appear larger).
  • Semantic Zooming scales data space (i.e., the domain of a scale function but preserves the range; thus, points spread out when zoomed in).
  • Zoomable Choropleth for an alternate semantics when zooming (i.e., when you zoom into a state, the state breaks up into constituent counties).
• Reconfigure: show me a different arrangement
  • Index Chart interactively re-normalizes the data based on the index point.
  • Reorderable Matrix where rows/columns can be dragged and dropped to reorder them a la Bertin’s looms.