Charts
react-wrapped ships twenty-one charts, each a picture of its own numbers. A scene hands a chart type its data and never draws its own, so every chart in a video shares one look: a glow behind what matters, a hairline through the point, and the number in a pill.
- SparkA line over time, one stretch lit.
- BarsColumns sharing one light, the ones that matter lit.
- FunnelA flow narrowing, stage by stage.
- PulseEvery day a stroke, the quiet stretch lit.
- RingsParts of a whole, biggest outside.
- DonutOne part against the rest.
- DaysA short run of dates, the ones that matter ringed.
- DialA share, as lit segments.
- MeterOne pill per thing counted, lit where there was something.
- Pixel areaA total climbing, in graph cells.
- WheelA year around a ring, month by month.
- Day clockA day, hour by hour. The lit hour is the busiest.
- RiverParts of a whole, month by month. One of them arrived halfway.
- Dot shareA share as a hundred dots, the lit ones the part that counts.
- Then and nowThe ring is where last year ended, the dot is where this one did.
- BubblesParts of a whole as discs, sized by their share.
- Month up closeOne month, every day of it. The lit day is the biggest.
- RadarA year as one outline, against everyone else's.
- Where you standEveryone, fewest to most. The lit bar is where you are.
- MirrorWhat was added above the line, what was removed below it.
- Week by hourA week, hour by hour. The lit cell is the busiest slot.
How charts animate
- Structure first. Empty slots, grids and axis names stand before any number arrives.
- Numbers arrive with a direction. A level rising, a wave, a hand going round.
- The point lands last and alone, then its pill grows out of it on a hairline.
- Nothing grows past its own size. Cells in a grid never overlap their neighbours on the way in.
- Everything seeks. A chart animates on the scene's timeline, so scrubbing and exporting frame by frame both work.
Colours
A chart reads the palette of the stage it is on. The lit part takes --wr-rarity, the quiet part the palette's five levels, text takes --wr-fg. Change the palette and every chart follows; see theming.
