Visual Perception and D3 Foundations

Visual Perception

Pre-attentive processing
Gestalt principles
Perceptual accuracy
Channel effectiveness

D3.js Introduction

Core concepts
DOM manipulation
Data binding
Basic charts

Quick Recap

Design Principles

Expressiveness: A set of facts is expressible in a visual language if the sentences in the language express all the facts in the set of data, and only the facts in the data
Effectiveness: A visualization is more effective than another visualization if the information conveyed by one visualization is more readily perceived than the information in the other visualization

Design Principles Translated

Expressiveness: Tell the truth and nothing but the truth (don’t lie, and don’t lie by omission)
Effectiveness: Use encodings that people decode better (where better == faster and/or more accurate)

Effectiveness measures

Accuracy: Estimating magnitudes
Discriminability: number of values one can distinguish
Saliency: attracting attention
Separability: interference between channels
Grouping: pattern formation

Perception for Design

The Brain and Vision

“Visual thinking consists of a series of acts of attention, driving eye movements, and tuning our pattern finding circuits” - Colin Ware

The Visual Brain

The Act of Perception

Bottom-Up and Top-Down Processes

Bottom-up Processing

Information is successively selected and filtered into patterns as it passes through stages:
1. Optical nerve to V1 Cortex
2. Use texture and colors to aggregate patterns
3. Visual objects recognized in visual working memory

Top-Down Processing

Every stage of bottom-up processing has a corresponding top-down process
Ware describes this as “attention”
We only get the information we need, when we need it

Implications for Design

“Just-in-time visual queries” (Ware)
“The brain operates as a set of nested loops. Outer loops deal with generality while inner loops process detail.” (Ware)

Low-Level Feature Analysis

David Hubel and Torsten Wiesel won Nobel Prize for this discovery
Visual cortex contains specialized cells for detecting edges, orientations, and motion

What and Where Pathways

What pathway: Object identification
Where pathway: Object location and eye movement

Accuracy

Fechner’s experiment (1869)

Power Law

Graphical Perception

Cleveland & McGill Experiment

Task: Judge the percentage that the smaller value is of the larger

Cleveland & McGill Results

Position > Length and Angle > Area

Other Cleveland and McGill Experiment

Channel Effectiveness Ranking

Accuracy Guidelines

Prioritize high-rank channels (with reason)
Do not expect precise judgments from low-rank channels
Position > Length > Angle > Area > Volume > Color

Application: - Use position for most important comparisons - Use color for categorical distinctions - Avoid 3D for quantitative data

Relative vs. Absolute Judgments

Humans are better at relative comparisons than absolute judgments

Discriminability

Discriminability: How many values can be distinguished within a channel
It depends on:
- Channel properties
- Spatial arrangement
- Size
- Cardinality

Discriminability

Discriminability: How many values can be distinguished within a channel
It depends on:
- Channel properties
- Spatial arrangement
- Size
- Cardinality

Discriminability

How many distinct values can be distinguished within a channel?

Depends on: - Channel properties - Spatial arrangement - Size (resolution) - Cardinality

Practical limits: - Line width: ~3 levels - Color hues: 5-6 maximum - Symbol shapes: 5-6 maximum

Discriminability Guidelines

Do not overestimate the number of values viewers can perceive or discriminate.

Strategies to overcome this problem

How do we solve the problem of encoding a categorial attribute with high cardinality?
- Grouping
- Filtering
- Faceting

Grouping

Semantically grouping elements can help reduce the number of distinct classes you need to distinguish

Filtering

Selecting important classes to answer your data question reduces the cardinality problem

Faceting

Encoding the categorical value in the position channel

Pre-attentive Processing: Popout

Anne Treisman studied how to find patterns when surrounded by distractors

For some configurations, search time does not depend on number of distractors

Pre-attentive Processing: Popout

Enrico’s video experiment

Pre-attentive vs. Attentive

Attentive

Serial search

Multiple Channels Usually Not Pre-attentive

Combining color AND shape requires attentive processing

Application to visualization design

Pre-attentive Processing

Tasks performed in less than 200-250 milliseconds
Faster than eye movement initiation
Suggests processing by parallel low-level visual system

Grouping: The Gestalt Principles

Interactive demo

Visualization is a two-way street:
- We (the vis designer) bring something to the table
- The human (end user) brings their prior experience
Design should take prior experience into account
What is prior experience? Gestalt laws

Gestalt: Closure

We can complete incomplete shapes

Implications: - Visualizations can be unintentionally misleading - Sometimes only necessary to show sparse marks to convey trend

Gestalt: Similarity

Elements with the same visual properties are perceived as grouped

Gestalt: Proximity

Elements that are spatially close are perceived as grouped

Gestalt: Enclosure

Explicit visual encoding of enclosure depicts grouping

Bubblesets video

Gestalt: Connection

Objects connected together are perceived as a group

Connection Examples

Just Noticeable Difference (JND)

The amount something must be changed to be noticeable at least 50% of the time
Stevens’s power law: Wikipedia link

Channel Separability

Amount of interference between channels

Some channel combinations interfere more than others

Introduction to D3.js

What is D3?

Data-Driven Documents
JavaScript library for manipulating documents based on data
Created by Mike Bostock (Observable, NYTimes)
Low-level but powerful approach to visualization

Key Concepts:

Bind data to DOM elements
Use data to drive visual properties
Declarative approach to visualization

D3 Core Concepts

Selections

d3.select("body")      // Select single element
d3.selectAll("circle") // Select all circles

Data Binding

circles.data(dataset)  // Bind data to elements

Enter, Update, Exit Pattern

// Enter: Create new elements for new data
// Update: Update existing elements
// Exit: Remove elements with no data

D3 Scales

Transform data values to visual values

// Linear scale for continuous data
const xScale = d3.scaleLinear()
  .domain([0, 100])    // Data space
  .range([0, width]);  // Visual space

// Ordinal scale for categories
const colorScale = d3.scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(["red", "green", "blue"]);

Simple D3 Bar Chart

// Set dimensions
const width = 500, height = 300;
const margin = {top: 20, right: 20, bottom: 30, left: 40};

// Create SVG
const svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

// Create scales
const x = d3.scaleBand()
  .range([margin.left, width - margin.right])
  .padding(0.1);

const y = d3.scaleLinear()
  .range([height - margin.bottom, margin.top]);

// Load and visualize data
d3.csv("data.csv").then(data => {
  // Set domains
  x.domain(data.map(d => d.category));
  y.domain([0, d3.max(data, d => +d.value)]);

  // Create bars
  svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.category))
    .attr("width", x.bandwidth())
    .attr("y", d => y(d.value))
    .attr("height", d => height - margin.bottom - y(d.value));
});

D3 vs. Vega-Lite

D3.js

Imperative: How to create
Low-level control
Full flexibility
Steep learning curve
~100 lines for bar chart

Vega-Lite

Declarative: What to create
High-level abstraction
Quick prototyping
Limited customization
~10 lines for bar chart

When to use which? - Vega-Lite: Exploration, standard charts - D3: Custom visualizations, interactions

Perception Principles in Practice

Design Guidelines:

Use position for primary comparisons
Limit color categories to 5-6
Leverage pre-attentive features for highlighting
Apply Gestalt principles for grouping
Consider colorblindness (~10% of males)

Common Mistakes:

Too many colors in categorical data
3D charts for 2D data
Relying on area/volume for precise values
Ignoring perceptual limits

Lab Preview: Your First D3 Visualization

Today’s Lab Activities:

Set up D3 development environment
Create basic selections and data binding
Build a simple bar chart
Add scales and axes
Implement basic interactions (hover)

Resources:

Summary