Component theme

Micro Data-Viz

19 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• 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.
• Odometer Count-UpSix-digit mechanical odometer with rolling digit reels easing toward a random REQUESTS/SEC target; tap/click to randomize a new target value.
• Bubble Pack Jiggle14 multicolor gradient bubbles pack toward center with soft collision relaxation and a gentle sine jiggle; click repacks with new random sizes.
• Candlestick Ticker22 green/red candlesticks scroll left continuously, generating random OHLC data; a dashed last-price line with live label updates in real time.
• Streamgraph DriftFive stacked blue ribbons flow as a streamgraph using bezier curves and layered sines; ribbons swell organically with a glowing right-edge data-entry seam.
• Slope Chart CrossingNine labeled lines connect BEFORE and AFTER rank axes, animating crossings each loop as series shuffle to new positions in warm amber tones.
• Scatter Regression Settle46 teal dots fly in, jitter, then settle as a glowing regression line and confidence band sweep to fit. Pearson r reveals as the line converges.
• Treemap Subdivide11 green-to-slate rounded tiles fill the canvas as a squarified treemap; values shift each cycle and tiles smoothly interpolate to new sizes and positions.
• Contour Breathing11 teal contour lines trace a living topographic map of 5 drifting gaussian hills; lines pulse and breathe as hills orbit and a ripple wave shifts the field.
• Beeswarm CollideCoral dots drop onto a value axis and collide-relax into a bimodal beeswarm silhouette; new points spawn continuously and pointer adds dots at cursor…
• Waffle Fill Quantize10x10 waffle grid fills cell-by-cell with a bright ripple to an honest integer percent, holds, then drains and cycles preset targets.
• Ridgeline Morph14 stacked rust-toned density curves continuously morph between bimodal and unimodal distributions with glowing crests; pointer Y position amplifies…
• Chord RebalanceSix warm-ochre nodes on a ring with ribbon flows that continuously lerp toward random targets, making arc spans and chord widths breathe in organic cycles.
• Dot Plot Rank FlipSeven labeled rows animate new random values and reorder by rank each round; cyan dots slide horizontally and rows swap positions with cubic easing.