Manipulate Views
MIDS W209: Information Visualization

John Alexis Guerra Gómez | john.guerra[at]gmail.com | @duto_guerra
Andy Reagan | andy[at]andyreagan.com |@andyreagan
https://johnguerra.co/lectures/MIDS_W209_Information_Visualization/10_Manipulate_Views/
Partially based on slides from Tamara Munzner

What We Are Going to Learn

  • Manipulate views
    • Change encodings/parameters
    • Animations
    • Interactions
    • Navigate
  • Case studies
University Of California at Berkeley logo

Manipulate Views

How to Handle Complexity

Three strategies
  • Change view over time
  • Facet across multiple views
  • Reduce items/attributes within single view
And one previous
  • Derive new data to show within viewderive
manipulate: change, select, navigate; facet: juxtapose, parition, superimpose; reduce: filter, aggregate, embed

Strategies

  • Change view over time 👈 most obvious one: interaction
  • Facet
  • Reduce
  • Derive

Manipulate

change over time; select
Navigate: item reduction: zoom; pan/translate; constrained
attribute reduction: slice; cut; project

Change Over Time

  • Change any of the other choices
    • Encoding itself
    • Parameters
    • Arrange: rearrange reorder
    • Aggregation level, what is filtered...

    • Interaction entails change
University Of California at Berkeley logo

Change Encoding/Parameters

Change Encoding

screenshot of re-encoding from from Tableauscreenshot of re-encoding from from Tableau
screenshot of re-encoding from from Tableauscreenshot of re-encoding from from Tableau
Made using Tableau

Change Encoding: Vega-Lite

Vega Lite Change Encoding
Not so easy in D3 🤷🏼‍♂️

Change Parameters

  • Widgets and controls:
    • Sliders, buttons, radio buttons, checkboxes, dropdowns/comboboxes
  • Pros:
    • Clear affordances, self-documenting (with labels)
  • Cons:
    • Uses screen space
  • Design choices:
    • Separated vs. interleaved
      • Controls and canvas
Slide inspired by: Alexander Lex, Utah
Growth of a Nation
[Growth of a Nation](http://laurenwood.github.io/)
University Of California at Berkeley logo

Case Study: Changing Encoding and Parameters

Hedonometer.org

Line Chart Changes

  • Change time parameter using brush
  • Change time parameter using menu
  • Change encoding of day-of-week using menu

Word Shift Graph Changes

  • Change time parameter with menu and date picker
  • Change language parameter with translation toggle
  • Change position encoding with bar selector

Demo

University Of California at Berkeley logo

Animations

Reorder: DataStripes

  • What: table with many attributes
  • How: data-driven reordering by selecting column
  • Why: find correlations between attributes
multiple depictions of how complex data can be ordered, by color, date, and other dimensions
http://carlmanaster.github.io/datastripes/

Re-Align: LineUp

  • Stacked bars
    • Easy to compare
      • First segment
      • Total bar
  • Align to different segment
  • Supports flexible comparison
Content aligned along the left marginContent aligned along the center margin
[LineUp: Visual Analysis of Multi-Attribute Rankings.Gratzl, Lex, Gehlenborg, Pfister, and Streit. IEEE Trans. Visualization and Computer Graphics (Proc. InfoVis 2013) 19:12 (2013), 2277–2286.]

LineUp

http://vcg.seas.harvard.edu/files/pfister/files/2013_infovis_lineup.mp4

"LineUP" d 3

https://observablehq.com/@john-guerra/lineup

Idiom: Animated Transitions

  • Smooth interpolation from one state to another
    • Alternative to jump cuts, supports item tracking
      • Best case for animation
    • Staging to reduce cognitive load
  • Example: animated transitions in statistical data graphics
animated transitionvimeo.com/19278444
[Animated Transitions in Statistical Data Graphics. Heer and Robertson. IEEE TVCG (Proc InfoVis 2007) 13(6):1240-1247, 2007]

D3 Show Reel

https://bost.ocks.org/mike/miserables/

Animating the Show Reel: Flubber

Flubber

Collapsible Tree

Tree drilldown/rollup

Zoomable Bar Chart

  • Tree drilldown/rollup
  • Value comparison

Zoomable Icicle

  • Tree drilldown/rollup
  • Value comparison
University Of California at Berkeley logo

Interactions

Selection

  • Selection: basic operation for most interaction
  • Design choices
    • How many selection types?
      • Interaction modalities
        • Click/tap (heavyweight) vs. hover (lightweight but not available on most touchscreens)
        • Multiple click types (shift-click, option-click, etc.)
        • Proximity beyond click/hover (touching vs. nearby vs. distant)
      • Application semantics
      • Adding to selection set vs. replacing selection
      • Can selection be null?
        • Example: toggle so nothing selected if click on background
      • Primary vs. secondary (example: source/target nodes in network)
      • Group membership (add/delete items, name group, etc.)
Select a single plot point

Types of Selection

  • Interval:
    • Brush 1D
    • Brush 2D
  • Individual:
    • Closest item (hover)
    • Click to select
  • Multi:
    • Shift-click
    • By similarity (e.g., connection, same state)

Voronoi Maps

  • Tesselate the canvas
  • Quickly find the closest point

Highlight

  • Highlight: change visual encoding for selection targets
    • Visual feedback closely tied to but separable from selection (interaction)
  • Design choices: typical visual channels
    • Change item color
      • But hides existing color coding
    • Add outline mark
    • Change size (example: increase outline mark linewidth)
    • Change shape (example: from solid to dashed line for link mark)
  • Unusual channels: motion
    • Motion: usually avoid for single view
      • With multiple views, could justify to draw attention to other views
Colombian election results

Interaction Technology

  • What do you design for?
    • Mouse and keyboard on desktop?
      • Large screens, hover, multiple clicks
    • Touch interaction on mobile?
      • Small screens, no hover, just tap

    • Gestures from video/sensors?
      • Ergonomic reality vs. movie bombast

    • Eye tracking?
Slide inspired by: Alexander Lex, Utah
Data visualization and the news - Gregor Aisch (37 min)
https://vimeo.com/182590214
I Hate Tom Cruise - Alex Kauffmann (5 min)
https://www.youtube.com/watch?v=QXLfT9sFcbc

Tooltips

  • Popup information for selection
    • Hover or click
    • Can provide useful additional detail on demand
    • Beware: does not support overview!
      • Always consider if there’s a way to visually encode directly to provide overview.
      • "If you make a rollover or tooltip, assume nobody will see it. If it's important, make it explicit."
        • Gregor Aisch, NYTimes

Responsiveness is Required

  • Visual feedback: three rough categories
    • 0.1 seconds: perceptual processing
      • Subsecond response for mouseover highlighting: ballistic motion
    • 1 second: immediate response
      • Fast response after mouseclick, button press: Fitts’ Law limits on motor control
    • 10 seconds: brief tasks
      • Bounded response after dialog box: mental model of heavyweight operation (file load)
  • Scalability considerations
    • Highlight selection without complete redraw of view (graphics frontbuffer)
    • Show hourglass for multi-second operations (check for cancel/undo)
    • Show progress bar for long operations (process in background thread)
    • Rendering speed when item count is large (guaranteed frame rate)
University Of California at Berkeley logo

Manipulate View Case Studies

Colombian Elections

https://johnguerra.co/viz/resultadosSegundaVuelta2018/

Twitter Influentials

Twitter Influentials
https://johnguerra.co/viz/influentials/story/?hashtag=ieeevis2019
University Of California at Berkeley logo

Animations on the Web

University Of California at Berkeley logo

What We Learned

  • Manipulate views
    • Change encodings/parameters
    • Animations
    • Interactions
    • Navigate
    • Case Studies
University Of California at Berkeley logo