Micro Data-Viz
KPI Sector Drum
KPI Sector Drum compares focus, commits, coffee ounces and bugs across Monday, Friday and Forever in a parchment and clay tessellation palette.
canvasmedium complexitymoderate motionpointer+keyboardmobile-ready
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
A compact comparison of illustrative metrics across selectable days.
When not to
Financial reporting without replacing the sample data and adding accessible data tables.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Adapt content through existing data arrays; retain named palette, controls and demo-v1 lifecycle.
Safe to edit
- Dark/light palette tokens
- Sample data and visible labels
- Animation timing and geometry
Keep intact
- IIFE and namespaced CSS/IDs
- Initial Manual mode; sticky first-input takeover
- Theme URL/message hook; redraw canvas palette
- Keyboard/focus/live status; reduced motion; hidden pause
Known limitations
- Illustrative data; local state resets on remount.
- Canvas/SVG labels scale with artwork; inspect readability at small sizes.
More Micro Data-Viz components
- Bar Grow + ReshuffleSeven rounded gradient bars ease to new random heights every 1.6s with glowing cap dots. Click triggers an immediate reshuffle.
- Live Line SweepA glowing cyan area line chart scrolls a live sine-plus-noise time-series across a faint grid, with a white head dot marking the latest value.
- Donut Ring ProgressOlive-to-terracotta gradient donut ring eases its fill to random targets with a leading dot and large centered percentage readout. Tap to jump to a new value.
- Sparkline Moving DotA green sparkline traces itself across a faint ghost path, led by a haloed white dot; on completion it regenerates a new random 28-point series.
- Radial Gauge NeedleSemicircular gauge on dark amber background with green-yellow-red arc segments; a glowing white needle sweeps smoothly via sine wave with a live 0–100…
- Heatmap Ripple12x6 grid of rounded cells colored via a magma ramp, with a sine-wave ripple emanating from a point that orbits and follows the cursor.