The chart is the small half of this.

Drag along it and three things follow your finger: a clip rectangle that reveals the coloured line over the grey one, a fill under it, and the figure at the top. The curve itself is one SVG path, 21 cubic segments, smoothed with Catmull-Rom so the joins do not show. The reveal is a clip rather than a stroke-dash animation, because a clip also cuts the fill, and two elements revealing in lockstep is one fewer thing to keep in sync.

That is a normal afternoon. The interesting part came before it.

The data problem

To build a chart that looks like money you need a line that looks like money. Not a sine wave and not Math.random(). Something with a run up, a wobble, a drop that recovers, the shape a real balance actually makes.

You can type that. I did type that, for a while, adjusting bezier control points by hand and reloading to see whether the result looked like a savings account or an ECG.

So the second day went on a graph builder instead. Click to add a point, drag to move it, double click to remove it. It draws the same curve the chart draws, using the same code, and then exports the points as JSON. Import takes them back.

Both halves are in the frame below, because they were always one page and one script. The chart on top, the builder underneath.

Why that was the right way round

The builder took longer than the thing it was built for, which sounds like poor judgement and was not.

Drawing a curve by eye takes about ten seconds. Guessing one in numbers took me the better part of a morning and still produced something that looked like a heart monitor. Everything after that first curve was free, and the tool outlives the chart: any future graph that needs data that looks real starts from a file this thing wrote.

The unglamorous version of the same point: most of the time spent on data visualisation is spent on the data, and it is usually the part nobody budgets for.

What is in the export

Plain coordinates, in the chart's own 800 by 320 space, as JSON.

{ "points": [{ "x": 158.82, "y": 115.04 }, ...] }

No schema, no version field, nothing clever. It is read by one script and written by one script, and the moment it becomes a format it becomes something to maintain.