demo · v138

CSS-only data viz

Add or remove items. The two charts redraw — no JS measurements, no inline styles. Every bar width, color, and angle is computed in CSS from sibling-index() / sibling-count(). The trick that makes a 138 page genuinely smaller than its 137 equivalent.

checking support…

polar — angle = (i − 1) · 360 / n

    bar — width = (1.05 − (i − 1)/n) · 100%

      the formula

      .bars li {
  width: calc((1.05 - (sibling-index() - 1) / sibling-count()) * 100%);
  background: hsl(calc(210deg - (sibling-index() - 1) * (180deg / sibling-count())) 60% 40%);
}

      Pre-138, a chart like this needed JS: read the child count, set per-element CSS custom properties, listen for mutations. With sibling-index() and sibling-count() the math lives entirely in the stylesheet and re-runs automatically when items are added or removed.

      see also