Interactive Data Visualization · D3.js

THE DATA
MOVES.

Three D3.js charts built like product interfaces. Live FPS monitor, interactive scatter plot, force-directed graph with drag and hover.

3 live charts D3.js v7 60fps target [ INTERACTIVE ]
At a glance 30-second read

What it is

Three production-grade D3.js visualizations — performance monitor, scatter plot, force-directed graph — built like interactive product surfaces, not static charts. The kind of data UI an AI dashboard or agent observability console needs.

Maps to

Frontend Engineer (AI dashboards) · Design Engineer · Data-Viz Engineer · AI Observability UX

Skills demonstrated

  • 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.

The constraint: D3 uses presentation attributes, not CSS. Design tokens don't inherit. Every color, opacity, and stroke width had to be applied at the render layer, not the style sheet.

The force graph was the hardest. Nodes, links, labels, and drag state update at 60fps while staying legible.

// 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.

0
Lines of code
across 3 shipped projects
0
Interactive components
designed and built in code
0
GSAP timelines
scroll-driven + entrance
0
Days to build
concept to live demo