∞ forever components

Micro Data-Viz

Treemap Subdivide

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

canvasmedium complexitymoderate motionclickmobile-ready

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

Ambient data dashboards, portfolio backgrounds, or any context needing a living layout visualization without specific data labels.

When not to

Contexts requiring readable labels or precise data — tiles carry no text. Low-end devices with many resize events may stutter during re-layout.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change leaf count to 8 (N=8), shift hue band to teal (start at 160), and slow the morph transition by changing the t increment from 0.012 to 0.007. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • leaf count (N=11)
  • hue band start and range (110–190, green→slate)
  • hold duration between morphs (130 frames)
  • t increment speed (0.012 + boost*0.02)
  • gap between tiles (W*H*0.008)
  • padding (pad = W*H*0.045)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • squarify() recursive layout function
  • IIFE wrapper
  • prefers-reduced-motion static draw guard
  • visibilitychange stop/start
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
  • First input stops automatic morph cycles; the clicked geometry finishes its own interpolation before the renderer sleeps.
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions
  • Enter/Space and pointer morph from current geometry; reduced motion commits the new layout in one paint.

Known limitations

  • No aria or semantic data — purely decorative, unsuitable as an accessible chart
  • Hue is per-index not per-value so color rank does not track value rank across morphs
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

treemapdata-vizcanvassquarifiedmorphlayoutgenerative

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.