A finding title and an annotation that picks its side
In the picture: a yearly line rising from about 1,200 in January to a broad summer peak near 4,000 and falling back, with one narrow spike down to 439 in mid-August where an orange dot, a leader line and the label "14 Aug: app down, 439 rides" sit to the left. The second note, near 29 December, also goes left because there is no room on the right. Both labels have a white halo, so the line does not cross the letters. The halo is white here because this page is light; Topic 10.4 makes it follow the theme.
Chart text is part of the data. Pick sizes that stay readable when the SVG scales, line numbers up with tabular digits, write titles that state the finding, and place annotations so they never sit on the data or run off the edge.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write fitTitle(textNode, title, maxWidth) that returns the title unchanged if it fits and otherwise cuts words from the end and adds …. Test with a 200-unit and a 600-unit width.
Add a second annotation for the second-lowest day. What happens if it is close to the first one, and how would you avoid two labels on top of each other?
Explain it without notes
Why does text in a scaled SVG get small on a phone, and what is the fix?
What does font-variant-numeric: tabular-nums do, and when does it have no effect?
What makes a chart title a "finding"? Give the Lumen example.
Preview
Console
Nothing logged yet.Expected console output
title: Rides peaked at 4,380 on 18 Jul, then one day fell to 439
outage label goes to the left
annotations drawn: 1
a note on 29 Dec goes to the left