Line with a note
- Size
- 1920×1080
- Frame rate
- 30 fps
- Length
- 7s
The line draws with a dot riding its head, then someone circles the month and writes on it.
Make your own animated line chart
Draws a line chart and then circles the point that matters, which is the difference between showing data and making an argument. Say a sentence like the one below and your agent writes you a different one — free, in your browser.
Say this to your agent
>Draw this line chart and circle the month it jumped.
Or ask for a different one
Not settings — each one builds something else.
>Draw two lines and mark where they cross.
>A line chart where the annotation appears first and the line draws towards it.
>Draw the line and shade the area underneath as it goes.
What it worked out on its own
The dash array is the polyline's own length, summed segment by segment. Normalising with pathLength and asking for a non-scaling stroke makes the browser draw dashes instead of a line.
A dot rides the end of the line and the area fill is clipped to the same x. Three things at one moving position says something is being traversed; a line that merely gets longer does not.
The note lands after the line has finished, never during — a callout competing with the data gets both of them ignored.
It hangs off whichever side of the circle has room, because pinned to the right of a late month the sentence runs off the frame.
