[Data Visualization] Interacting with Views

Review: Validation

Where are We?

The Big Picture

• Datasets are often large and complex so drawing all of them into a single static view can be overwhelming.
• What options are available to handle such complexity? There are five.
  • 1. Change a view over time (this lecture)
  • 1. Derive new data (Lecture 3)
  • 3. Facet data by partitioning into multiple juxtaposed views (this lecture)
  • 1. Reduce the amount of data (next lecture)
  • 1. Embed focus and context information within a single view (next lecture)

Change View over Time

• Changing the view over time is the most obvious, popular, and flexible choice in vis design.
• Unavailable in printed visualizations
• Let users modify the view.
  • Change the encoding
  • Change the arrangement
  • Change the order
  • Change the viewpoint
  • Change which attributes are filtered
  • Change the aggregation level
  • $\dots$

Changing the Encoding

• Tableau
• Encoding
• Arrangement
• Mark type/size/color
• $\dots$

Changing the Order

• Reordering, often called sorting, is a powerful choice for finding patterns in a dataset by interactively changing the attribute that is used to order the data.
• Widely-used for table datasets
  • Order by student_id, order by score, …
• What if there are multiple attributes that can be used for sorting?

Example: LineUp

• Designed to support exploration of tables with many attributes through interactive reordering and realigning.

• Order universities by 0.25 * (Research) + 0.25 * (Citations) + $\dots$
  • Multiattribute ordering
• Changing the alignment and arrangement of stacked bars:

Summary: LineUp

• https://lineup.js.org/

Animated Transition

• When changing a view, you can provide animated transition.
  • A series of frames is generated to smoothly transition from one state to another.
  • vs. jump cut (no animation, simply redraw the view)
• https://sanddance.js.org/app/

• Zoom in

• Benefits:
  • Help users maintain a sense of context
  • Animation seems cool
• Drawbacks:
  • Hard to implement
  • Hard to follow if too much change
  • Change blindness
• cf. staggered animation

Staggered Animation

• 1) Color transition + move up
• 2) Move left

Select an Element

• Users need to select an element before they change it.
• Design choices:
• What can be a target?
  • a bar? a group of bars? an axis? a view? a legend?
• What are the possible selection types?
  • selected / not selected
  • selected + hovered / selected / hovered / not selected
  • {selected, hovered, faded out}!
• How many items can be in the selection at once? one? many?
• What is the default? empty? a default item? all?

Highlight an Element

• Selected elements are highlighted by changing their visual appearance, providing users with immediate visual feedback.
• Design choices for highlighting
  • Changing color
  • Adding an outline
  • Using the size channel
  • Using motion coding
  • Adding shadows

Example: Context-Preserving Visual Links

• Links are drawn as curves that are carefully routed between existing elements in a vis.

Navigate a View

• Navigation: changing the point of view from which things are drawn
  • Only items in the frame are visible
• Three components of navigation:
  • Zooming: moves the camera closer to or farther from the plane
  • Panning: moves the camera parallel to the plane of the image, either up and down or from side to side
  • Rotating: spins the camera around an axis
    • Rare in InfoVis

Zooming

• Geometric zooming: analogous to navigation through the physical world
  • Things get bigger but not change.
• Semantic zooming: the representation of the object adapts to the number of pixels available in the image-space region occupied by the object
  • Things get bigger and change.

Reducing Attributes

• Given 3D data points,
• A slice operation leaves data points that have a specific value on a specific dimension.
  • (x, y, z) such that z = 3.0
  • Dimensionality is reduced by 1
• A cut operation leaves data points under or over a cutting plane
  • (x, y, z) such that ax + by + cz < d
• A project operation multiplies a projection matrix X (linear projection).
  • 

Example: Slice and Cut

Example: Project

• Principal Component Analysis (PCA)

Facet into Multiple Views

• Facet: split data into multiple views
• Design choices:
• Do the two views use the same visual encoding?
• Do the two views share data?
  • All/subset/none
• Do the two views share navigation?
  • If we pan one view, does the other change?
• How are the two views placed?
  • Side-by-side/superimpose

Coordinated Views

• Coordinated/linked views: multiple views relevant to each other
• Do the views use the same encoding?
  • If yes, shared encoding
  • Otherwise, multiform encoding

• How much data is shared between the coordinated views?
  • Shared data if all data is shared.
  • Overview/detail if one view shows a subset of what is in the other.
  • Small multiples if the views show different partitions of the dataset into disjoint pieces.

Example: Exploratory Data Visualizer

• If multiform views are coordinated, we can inspect multiple aspects of the same data at once (with different encodings)
  • Called linked highlighting (very common interaction idiom in practice)

Summary: Exploratory Data Visualizer

Overview/Detail

• In overview/detail, one of the views shows information about the entire dataset to provide an overview of everything.
• e.g., minimaps

Example: Bird’s-Eye Maps

Example: Multiform Overview/Detail

Summary: Multiform Overview/Detail

Small Multiples

• In small multiples, views share the same encoding but show different data (different set of rows)

Example: Cerebral

Summary: Cerebral

Shared Navigation

• In many overview/detail approaches, navigation is synchronized between the overview and the detail view

Partition into Views

• A multiattribute dataset should be partitioned into meaningful groups to be visualized in multiple views.
  • = How to create multiples in small multiples?
• How to partition?
  • by a categorical attribute (e.g., grouping)
  • by a quantitative attribute (e.g., binning)
  • by similarity (e.g., clustering)
• How to align partitions?
  • List alignment, matrix alignment, and recursive subdivision

Example: Grouped Bar Charts (List Alignment)

Example: Trellis (Matrix Alignment)

• Group by site
  • 6 levels
  • where the barley was grown
• Group by year
  • 2 levels
• Map variety to y
  • type of barley
• Map yield to x
  • the amount of yield
• Main-effect ordering in (a)
  • sort by median yield

Example: Trellis

• Color encoding for comparison

Example: HiVE (Recursive Subdivision)

• Visualizing one million property transaction data in London
  • House type: Flat (flats), Ter (attached terrace houses), Semi (semidetached house), and Det (fully detached house)
  • Time of sale: year/month
  • Neighborhood: 33 levels
• How would you visualize this data?

• Split by house type
• Split by neighborhood
  • Recursive subdivision
• A cell is a heatmap that shows time with years as columns and months rows.

• Split by neighborhood first
• Split by house type
• A cell is a heatmap that shows time with years as columns and months rows.

• Split by house type (Treemap)
• Split by neighborhood
• A cell is a heatmap that shows time with years as columns and months rows.

• Split by house type
• Arrange by neighborhood

Superimpose Layers

• Superimposed layers: you can place multiple views at the same location
• Design choices:
• How many layers are used?
• How are the layers visually distinguished from each other?
• Is there a small static set of layers that do not change, or are the layers constructed dynamically in response to user selection?

Example: Static Layers

Example: Superimposed Line Charts

• Shows the scalability issue of superimposition

Example: Horizon Graph

Example: Dynamic Layers

• With dynamic layers, a layer with different salience than the rest of the view is constructed interactively.
• Highlight one-hop-away nodes

Summary – Interacting with Views

• Changing a single view (manipulate): encoding, arrangement, order
  • Viewpoint: pan, zoom (geometric/semantic), rotate
  • Data: slice, cut, and project
• Multiple coordinated views (facet)
  • Juxtaposition (multiform, overview/detail, small multiples)
  • Partition
  • Superimpose (static/dynamic)