Faceting
MIDS W209: Information Visualization

Partially based on slides from Tamara Munzner

What We Are Going to L earn

  • Faceting
    • Juxtapose
    • Partition
    • Superimpose
  • Shared data
  • Shared encoding
  • Shared navigation
  • Dashboarding in a box
  • Architecture for visualization
University Of California at Berkeley logo

Facet Across Multiple Views

Facet

Juxtapose, Partition, Superimpose
University Of California at Berkeley logo

Juxtapose

Juxtapose and Coordinate Views

Share Encoding: Same/Different; Share Data: All/Subset/None; Share Navigation

Coordinate Views:
Design Choice Interaction

Design Choice Interaction

Juxtapose

  • Design choices
    • View count
      • Few vs. many
    • View visibility
    • View arrangment
      • User-managed vs. system-aligned
  • Why juxtapose views?
    • Benefits: eyes vs. memory
      • Lower cognitive load to move eyes between two views than remembering previous state with single changing view
    • Costs: display area, two views side-by-side each have only half the area of one view
University Of California at Berkeley logo

Share Encoding

Idiom: Overivew-Detail Views

System: Google Maps
  • Encoding: same
  • Data: subset shared
  • Navigation: shared
    • Bi-directional linking
  • Differences:
    • Viewpoint
    • (Size)
  • Special case: bird's-eye map
Overview map from Google maps
[A Review of Overview+Detail, Zooming, and Focus+Context Interfaces. Cockburn, Karlson, and Bederson. ACM Computing Surveys 41:1 (2008), 1–31.]

Idiom: Small Multiples

System: cerebral
  • Encoding: same
  • Data: none shared
    • Different attributes for node colors
    • (Same network layout)
  • Navigation: shared
Small multiples
[Cerebral: Visualizing Multiple Experimental Conditions on a Graph with Biological Context. Barsky, Munzner, Gardy, and Kincaid. IEEE Trans. Visualization and Computer Graphics (Proc. InfoVis 2008) 14:6 (2008), 1253–1260.]

Focus/Context

Same encoding/subset of data/linked navigation

Small Multiples (Cubism)

Same encoding/different data/linked navigation

http://square.github.io/cubism/demo/
University Of California at Berkeley logo

Share Data

Idiom: Linked Highlighting

System: EDV
  • See how regions contiguous in one view are distributed within another
    • Powerful and pervasive interaction idiom
  • Encoding: different
  • Multiform
  • Data: all shared
  • AKA: brushing and linking
Visual Exploration of Large Structured Datasets
[Visual Exploration of Large Structured Datasets. Wills. Proc. New Techniques and Trends in Statistics (NTTS), pp. 237–246. IOS Press, 1995.]

Linked Filtering (Crossfilter)

https://crossfilter.github.io/crossfilter/

Multiform Overview/Details

Tweetometro: Different encoding/subset of data/linked navigation

http://old.tweetometro.co/

Multiform Overview (Treeversity)

Different encoding/all data/linked navigation

https://treeversity.cattlab.umd.edu

System: Improvise

  • Investigate power of multiple views
    • Pushing limits on view count, interaction complexity
    • How many is okay?
      • Open research question
    • Reorderable lists
    • Easy lookup
    • Useful when linked to other encodings
Building Highly-Coordinated Visualizations In Improvise
[Building Highly-Coordinated Visualizations In Improvise. Weaver. Proc. IEEE Symp. Information Visualization (InfoVis), pp. 159–166, 2004.]

Improvise

http://www.cs.ou.edu/~weaver/improvise/
University Of California at Berkeley logo

Share Navigation

University Of California at Berkeley logo

Partition

Partition Into Views

  • How to divide data between views
    • Split into regions by attributes
    • Encodes association between items using spatial proximity
    • Order of splits has major implications for what patterns are visible
  • No strict dividing line
    • View: big/detailed
      • Contiguous region in which visually encoded data is shown on the display
    • Glyph: small/iconic
      • Object with internal structure that arises from multiple marks
partition into side-by-side viewspartition views

Partitioning: List Alignment

  • Single bar chart with grouped bars
    • Split by state into regions
      • Complex glyph within each region showing all ages
    • Compare: easy within state, hard across ages
single bar chart with grouped bars
  • Small-multiple bar charts
    • Split by age into regions
      • One chart per region
    • Compare: easy within age, harder across states
small-multiple bar charts

Partitioning: Recursive Subdivision, Part I

System: HIVE

  • Split by neighborhood
  • Then by type
  • Then time
    • Years as rows
    • Months as columns
  • Color by price

  • Neighborhood patterns
    • Where it’s expensive
    • Where you pay much more for detached type
recursive subdivision
[Configuring Hierarchical Layouts to Address Research Questions. Slingsby, Dykes, and Wood. IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis 2009) 15:6 (2009), 977–984.]

Partitioning: Recursive Subdivision, Part II

System: HIVE

  • Switch order of splits
    • Type then neighborhood
  • Switch color
    • By price variation
  • Type patterns
    • Within specific type, which neighborhoods inconsistent
recursive subdivision
[Configuring Hierarchical Layouts to Address Research Questions. Slingsby, Dykes, and Wood. IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis 2009) 15:6 (2009), 977–984.]

Partitioning: Recursive Subdivision, Part III

System: HIVE

  • Different encoding for second-level regions
    • Choropleth maps
recursive subdivision
[Configuring Hierarchical Layouts to Address Research Questions. Slingsby, Dykes, and Wood. IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis 2009) 15:6 (2009), 977–984.]

Partitioning: Recursive Subdivision, Part IV

System: HIVE

  • Size regions by sale counts
    • Not uniformly
  • Result: treemap
recursive subdivision
figcaption.reference [Configuring Hierarchical Layouts to Address Research Questions. Slingsby, Dykes, and Wood. IEEE Transactions on Visualization and Computer Graphics (Proc. InfoVis 2009) 15:6 (2009), 977–984.]
University Of California at Berkeley logo

Superimpose

Superimpose Layers

  • Layer: set of objects spread out over region
    • Each set is a visually distinguishable group
    • Extent: whole view
  • Design choices
  • How many layers, how to distinguish?
    • Encode with different, nonoverlapping channels
    • Two layers achieveable, three with careful design
  • Small static set, or dynamic from many possible?
superimpose layers

Static Visual Layering

  • Foreground layer: roads
    • Hue, size distinguishing main from minor
    • High luminance contrast from background
  • Background layer: regions
  • Desaturated colors for water, parks, land areas
  • User can selectively focus attention
  • “Get it right in black and white”
  • Check luminance contrast with greyscale view
  • [Get it right in black and white. Stone. 2010.
http://www.stonesc.com/wordpress/2010/03/get-it-right-in-black-and-white]
layered map in colorlayered map in grayscale

Suprimposing Limits

  • Few layers, but many lines
    • Up to a few dozen
    • But not hundreds
  • Superimpose vs. juxtapose: empirical study
  • Superimposed for local, multiple for global
  • Tasks
    • Local: maximum, global: slope, discrimination
  • Same screen space for all multiples vs single superimposed
Graphical perception of multiple time series
cpu utilization over time

Dynamic Visual Layering

  • Interactive based on selection
  • One-hop neighbour highlighting demos: click vs. hover (lightweight)

Dynamic Layering

Twitter influencers for #ieeevis2019
University Of California at Berkeley logo

Dashboarding in a Box

Tools of the Trade

  • Python Dash (from Plotly folks)
  • R Shiny
  • Metabase?
  • Flask + Altair
  • Flask + d3

Taking Apart Dash

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://gist.githubusercontent.com/.../gdp-life-exp-2007.csv')

fig = px.scatter(df, x="gdp per capita", y="life expectancy",
                 size="population", color="continent", hover_name="country",
                 log_x=True, size_max=60)

app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Taking Apart Dash (cont.)

Under the Hood: Tt's Flask

Follow a Request

The Code We Used

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://gist.githubusercontent.com/.../gdp-life-exp-2007.csv')

fig = px.scatter(df, x="gdp per capita", y="life expectancy",
                 size="population", color="continent", hover_name="country",
                 log_x=True, size_max=60)

app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

So We'll Render a Template Like This

html
head
  {{ for headers in app.headers }}
  {{ header }}
  {{ endfor }}
  
/head
body
  {{ for div in app.layout }}
  {{ div.render_elements() }}
  {{ endfor }}
/body
/html
University Of California at Berkeley logo

Architecture for Visualization

Concepts We Know and Love

  • Frontend
  • Backend
  • What's missing here?
    • Processing engine
    • CDNs
    • Static storage

Building Blocks on the Web

  • Frontend client:
    • JavaScript libraries, run in real time
    • Access everything through browser-implemented APIs
  • Server:
    • Database
    • Files (database is a layer over files)
    • Web app (running Python/R/Node/etc.)
    • Other pieces of a web stack: Apache/Nginx/Gunicorn/UWSGI/etc.
    • Non-web-facing processing automation/schedulers (Airflow/Jenkins/cron)

Example: Visualization System Relying on Twitter Data

MassMutual's Client Marketing System

MassMutual's Advisor-Facing Mobile App

MassMutual's Prediction API

University Of California at Berkeley logo

Applying the
Visualization Mantra

Similian

Similan: Finding Similar Records from Temporal Categorical Data

LifeFlow

LifeFlow: Understanding Millions of Event Sequences in a Million Pixels

LifeFlow How-To

LifeFlow Demo

TreeVersity

https://treeversity.cattlab.umd.edu
University Of California at Berkeley logo

How to Scroll

University Of California at Berkeley logo

What we Learned

  • Faceting
    • Juxtapose
    • Partition
    • Superimpose
  • Shared data
  • Shared encoding
  • Shared navigation
  • Dashboarding in a box
  • Architecture for visualization
University Of California at Berkeley logo