Interactive Data Visualization · D3.js

THE DATA
MOVES.

I built three interactive charts to explore changing values, comparisons, and relationships.

3 live charts D3.js v7 60fps target [ INTERACTIVE ]

At a glance 30-second read

What it is

I built a performance monitor, a chart for comparing data points, and a graph for exploring connections. Visitors can filter, hover, and drag to inspect the examples. The charts use D3.js.

What I explored

I explored how people can inspect changing data and understand relationships.

Skills and tools

D3.js v7 — three chart types, one visual language
Live-updating UI at 60fps
Force-directed graph with drag, hover, dimming
Design-token discipline in a presentation-attribute API

D3.js SVG TypeScript Force Simulation

// The Brief

In D3, every visual property — axis color, label size, transition timing — is a manual call. The brief: three chart types, live data, one visual language.

I had to apply colors, transparency, and line widths directly when drawing the charts because D3 did not inherit those styles.

The connection graph was the hardest part. I worked on keeping its moving points, lines, and labels readable while people dragged them.

// 01 — Performance Monitor D3.js · live-updating · 1.2s interval

Render Performance

Frame rate over time. Live simulation — 60fps target, realistic jank spikes. Hover for exact values.

FPSMonitor · 60 data points [ LIVE ]

60 fps

target: 60fps

avg: —

low: —

// Design rationale The fps readout tracks the line. It turns yellow below 52 and red below 45.

// 02 — Decision Impact Matrix D3.js · filterable · hover-annotated

Complexity × Impact

Every design decision from this portfolio mapped by implementation complexity and perceived impact. Size = lines of code. Hover any point for details.

DecisionMatrix · 16 decisions [ INTERACTIVE ]

// Design rationale High-impact, low-complexity decisions cluster top-left: the scroll scrub and streaming text both sit there. The force graph is top-right — high impact, high complexity.

// 03 — Component Dependency Graph D3 force simulation · drag · hover

AI Interface Patterns — Dependency Graph

All 12 nodes of the AI Interface Pattern set. Hover to highlight connections. Drag to explore.

ComponentGraph · 12 nodes · 16 edges [ INTERACTIVE ]

component

hook

util

// Design rationale This is the import structure of the design system, rendered as a force simulation rather than drawn by hand in Figma.

// 04 — Portfolio Metrics build.2026.05

By the Numbers

The portfolio in raw numbers.

Lines of code

across 3 shipped projects

Interactive components

designed and built in code

GSAP timelines

scroll-driven + entrance

Days to build

concept to live demo