How Is Visualized
Information Visualization.

John Alexis Guerra Gómez | john.guerra[at]gmail.com | @duto_guerra
https://johnguerra.co/lectures/information_visualization_fall2024/04_How/
Partially based on slides from Tamara Munzner
and previous adaptations with Andy Reagan

What We Are Going to Learn

  • Marks
  • Channels
    • Ordered
    • Categorical
  • Expressivity
  • Effectivity

Marks and Channels

Analyze Idiom Structure

Based on chart by Aravind Satyanarayan

Marks

Point
Line
Area

Channels

Channels

Channel Types

Channels

What Marks and Channels? Part I

What Marks and Channels? Part I

What Marks and Channels? Part II

What Marks and Channels? Part II

What Marks and Channels? Part III

What Marks and Channels? Part III

What Marks and Channels? Part IV

What Marks and Channels? Part IV

Marks and Channels Examples

Points

  • Zero-dimensional
  • Convey position only
  • Can be size- and shape-coded

Lines

  • One-dimensional
  • Convey position and length
  • Can only be width-coded

Areas

  • Two-dimensional
  • Are fully constrained
From Semiology of Graphics, colorized by mbostock.

Effectiveness and Expressiveness

Expressiveness

  • Visual encoding should express all of—and only—the information in the dataset.
  • Ordered data should be shown in a way we perceive as ordered.
  • Match channel and data characteristics.

Effectiveness

Encode most important attributes with highest-ranked channels

[Automating the Design of Graphical Presentations of Relational Information. Mackinlay. ACM Trans. on Graphics (TOG) 5:2 (1986), 110–141]

Where Does the Ranking Come From?

  • Accuracy
  • Discriminability
  • Separability
  • Popout

Accuracy: Fundamental Theory

Accuracy: Visualization Experiments

Vis experiments results showing best accuracy
Crowdsourcing Graphical Perception: Using MechanicalTurk to Assess Visualization Design

Effectiveness Tips

Discriminability

How many steps are usable?
Line width: Not many 🤷🏼‍♂️
Line Width Map
Mappa.mundi.net TeleGeography's Traffic Flow Maps

Separability

Separability

Popup

  • Find the odd ones.
  • Which ones pop up?

Grouping

  • Containment
  • Connection
Containment and Connection

Containment example

Connection example

Grouping (cont.)

  • Proximity 👉 use spatial separation
  • Similarity 👉 use categorical channels
Identity Channels

Proximity example

Similarity example

IEEEVIS 2024 Paper Explorer

Relative vs. Absolute Judgments

  • Perceptual 👉 mostly relative judgments, not absolute
  • That’s why accuracy increases with:
    • Common frame
    • Scale and alignment
Not Aligned comparisonPosition along Unaligned common scaleAligned scale
after [Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods. Cleveland and McGill. Journ. American Statistical Association 79:387 (1984), 531–554.]

Weber's Law

The ratio of increment to background is constant.
  • Lift 2Kg
  • Then add 2Kg
  • Then add 20K
  • Then add 2K — would you feel them?
Popup is hard in a noisy visualization.

Practice: Choose Your Path

Which Tool for the Job?

D3Vega-LiteTableau

When D3

  • Interactivity
  • Custom-made visualizations
  • Performance
  • Differentiate
  • Force simulations
  • Advanced visualizations

When Vega-Lite

  • You need something quick...
  • ...Yet flexible
  • Web-based
  • Facets!
  • Coordinated views
  • Automate your charts

When Tableau

  • Visual exploration
  • First pass through the data
  • Don't need complex charts
  • Don't mind Tableau branding
  • Can spend the budget

Choose Your Path

D3Vega-LiteTableau

What We Learned

  • Marks
  • Channels
    • Ordered
    • Categorical
  • Expressivity
  • Effectivity