posit::conf

Principles for Effective Interactive Visualizations

and our search for donuts

Dylan Wootton, Ryan Yen · MIT Visualization Group

We are entering the golden age of interactive graphics

What is an effective interactive visualization?

Where should I get donuts in Houston?

What about wait times?

Well, where is close?

…but do they have pumpkin spice?

What is an effective interactive visualization?

What about wait times?

Well, where is close?

…do they have pumpkin spice?

What is an effective interactive visualization?

Interactions come in many flavors

Arrangement what order or layout do the marks take?

Elaboration how much detail is shown at once?

Selection which data points am I asking about?

Explore which part of the space am I in?

Encode which visual channel carries the value?

The rest of the zoo: vis-society.github.io/lectures/interaction-zoo

Interactive visualizations have 3 parts

Chapter 1: Data

DATA

Questions as Data Queries

DATA

Question Query Answer

“what donut shop is closest to me?”

SELECT name, dist(shop, me)
FROM shops
ORDER BY dist LIMIT 1

Bagby Rings 0.35 mi

“what’s the shop on Westheimer and Dunlavy?”

SELECT name
FROM shops
WHERE address =
  'Westheimer & Dunlavy'

Westheimer Crullers

“what are the average weekend waits in the Heights?”

SELECT AVG(weekend_wait)
FROM shops
WHERE neighborhood = :hood

28.3 min

?

Interactive visualizations are SQL queries

DATA

Single Selection

Multi-Selection

Selection as Key

SELECT *
FROM shops
WHERE dist(shop,me) < r

Interactive visualizations are SQL queries

DATA

Single Selection

Multi-Selection

Selection as Key

SELECT grp, AVG(wait)
FROM shops
WHERE grp IS NOT NULL
GROUP BY grp

Interactive visualizations are SQL queries

DATA

Single Selection

Multi-Selection

Selection as Key

SELECT s.name, r.text
FROM shops s
JOIN reviews r
  USING (shop_id)
WHERE s.shop_id = :shop

Treat Interactions like Data Queries

DATA

Do they enable access to, and transformation of, the underlying data?

Single Selection

Which shops are within a mile of me?

Multi-Selection

Does the Heights wait longer than Montrose?

Selection as Key

What do people say about this shop?

Chapter 2: Visuals

VISUALS

Selections can remove elements

VISUALS

What is the relationship of this data with outliers removed?

Selections can edit elements

VISUALS

How do the selected items compare against my baseline?

Selections can add elements

VISUALS

What simpler calculations help to show these comparisons?

Strategically Remove, Edit, and Add Elements

VISUALS

…to make comparisons easy to see.

Remove

What is the relationship with outliers removed?

Edit

How do the selected items compare against my baseline?

Add

What simpler calculations show these comparisons?

Chapter 3: Inputs

INPUTS

Inputs express a question, then adjust it

INPUTS

1 · Express the first gesture states the question

2 · Adjust every gesture after it refines the question

Expressing the selection: three inputs, one answer

INPUTS

Drag press, sweep, release

Two corners click, then click opposite

Center one click, fixed size

Reification enables adjustment over time

INPUTS

Nothing remains right for scanning, wrong for revising

Move it drag it, or nudge with the arrow keys

Adjust it every side and corner is editable

Inputs should be as easy to adjust as they are to express

INPUTS

Express match the gesture to the question

then

Adjust reify it so the next question is cheap

Three parts, three principles

RECAP

DATA

Treat interactions like data queries. Single Selection · Multi-Selection · Selection as Key

VISUALS

Strategically remove, edit and add elements. make the comparison easy to see

INPUTS

Make inputs as easy to adjust as they are to express. express, then adjust

= IV

An interactive visualization that answers the question.

Now follow Ryan into the interaction zoo

with vibe widget — the tool that made every visualization in this talk

Dylan Wootton, Ryan Yen · MIT Visualization Group