Agent Orchestrator
Visual Labs — Build Metrics & Data Explorations · 470 views
Slide Decks
→
Slides
Original Metrics
Full-screen slide deck with hero stats, heatmaps, bar charts, swimlanes, plugin architecture, and before/after comparison. The one that started it all.
HTML · CSS · Vanilla JS
→
Slides · Composio
Composio Brand
Same slide deck, Composio color palette. Cyan and teal accents on pure black. Clean brand alignment without being tacky.
HTML · CSS · Vanilla JS
→
Slides · D3.js
D3.js Charts
Slide deck with all charts rebuilt as proper D3.js SVG visualizations. Tooltips, animated entrances, clean axes.
D3.js v7 · SVG · IntersectionObserver
Interactive Explorations
→
Interactive · Composio
Circle Packing — Composio
Zoomable circle packing of the codebase. Click packages to zoom into files. Production vs test split. Cyan/teal palette. Branch activity below.
D3.js v7 · d3.pack() · Zoomable
→
Interactive · Elegant
Circle Packing — Elegant
Same zoomable codebase explorer with a warm, muted palette. Amber, sage, dusty blue, lavender. Editorial aesthetic.
D3.js v7 · d3.pack() · Zoomable
→
Interactive · Architecture
Chord Diagram
Dependency flow between all 11 components. Hover to highlight connections. Chord thickness shows interaction strength. Animated entrance.
D3.js v7 · d3.chord() · d3.ribbon()
Animated
→
Animated · Gapminder
Bubble Chart
Gapminder-style animation. Branches appear and grow across 8 days. X=lines of code, Y=commits, size=CI runs. Auto-plays on scroll.
D3.js v7 · Animated · IntersectionObserver
→
Animated · Racing
Racing Timeline
Horizontal bar race showing packages growing over 8 days. Self-drawing cumulative line chart with PR dots popping in. Snappy 5s animation.
D3.js v7 · Bar Race · SVG Path Animation
More Explorations
→
10 Visualizations
Visual Labs v2
Git graph, Sankey pipeline, treemap, session replay, PR waterfall, AI model heatmap, import network, globe, sonic build, and code rain.
D3.js · Web Audio · Canvas · Force Simulation