Collection

Data Visualization Patterns

An ongoing collection of experiments in visual encoding, interaction, and information structure—testing different ways of making data easier to explore and understand.

Explore the Collection ↓

Focus/Domain Data Visualization Information Design

What I'm Testing Visual encoding Interaction patterns

Format Ongoing experiments Small, focused studies

Tools D3.js JavaScript Figma Observable

This collection is a working library of data visualization patterns: small experiments built to isolate one question about clarity, comparison, navigation, or interpretation.

Each artifact tests how a change in encoding, interaction, or information structure can make complex data easier to explore and understand.

What I'm investigating

How chart form, hierarchy, annotation, filtering, and motion influence what people notice first—and how confidently they can move from overview to detail.

How the collection works

Each study begins with a narrow question, compares one or more approaches, and records the tradeoffs. The goal is a reusable set of patterns rather than a single finished product.

How I judge a pattern

A strong pattern makes the intended comparison apparent, preserves context during interaction, and reduces explanation without hiding uncertainty or complexity.

Current lines of inquiry

Comparison - making differences and trends easier to scan.
Exploration - helping people move between overview and detail.
Explanation - using hierarchy and annotation to guide interpretation.

Scroll to Explore

01 Comparison Layouts EncodingStructure Testing layouts for clear comparison across categories and time. Practiced: Small multiples, shared scales

02 Overview to Detail InteractionStructure Preserving context as readers inspect individual values. Practiced: Linked views, focus and context

03 Direct Annotation AnnotationEncoding Reducing the distance between marks and their explanation. Practiced: Direct labels, annotation hierarchy

04 Filter Feedback InteractionStructure Making the effects of filtering visible and understandable. Practiced: Filter states, transition feedback

05 Uncertainty Cues EncodingAnnotation Showing confidence and missingness alongside the main signal. Practiced: Uncertainty bands, missing-data states

Comparison Layouts

EncodingStructure

TypePattern Study

Year2026

StatusIn progress

A study of aligned views, small multiples, and overlays for comparing values across categories and time.

Practiced: Small multiples, shared scales, visual hierarchy

View on GitHub

Patterns & Takeaways

Encoding Principles

Position first - Aligned position usually supports more precise comparison than area, angle, or color.
Design for the question - The most effective chart form depends on the comparison a reader needs to make.
Keep scales honest - Consistent domains and visible baselines protect meaning across related views.

Interaction Principles

Preserve context - Detail should not erase the overview that gave it meaning.
Show what changed - Filters and transitions need visible feedback, not just responsive motion.
Support multiple paths - Hover, keyboard, touch, and direct selection should lead to equivalent information.

Information Structure

Lead with the signal - Hierarchy should make the primary finding legible before secondary controls and detail.
Label nearby - Direct annotation reduces the mental work of matching marks to a separate legend.
Progressive disclosure - Complexity is easier to navigate when detail appears in response to intent.

Next Experiments

Responsive density - Test how much information a visualization can retain across viewport sizes.
Uncertainty - Compare cues for estimates, confidence, and incomplete data.
Accessible exploration - Develop stronger keyboard paths, contrast, and nonvisual summaries.