Shape for the district, size for the docks, and two legends
The first four lines are the strings d3.symbol writes. The legend rows use the same shape and color scales as the marks.
A chart must explain its own colours, shapes and sizes. d3.symbol draws marker shapes, legends are small charts built with the same scales, and direct labels put the names on the lines themselves so the reader needs no lookup.
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.
Make sizeLegend(values, sizeFn) that returns the d text for each value, using d3.symbolCircle.
Give every station symbol in the first example a hover title with the station name, its district and its docks.
Explain it without notes
What is the size argument of d3.symbol?
Why build a legend from the same scales as the chart?
What is a direct label and when does it stop working?
Preview
Console
Nothing logged yet.Expected console output
circle M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0
square M-4,-4h8v8h-8Z
triangle M0,-7.019L6.079,3.51L-6.079,3.51Z
size 0 M0,0
districts: 6 | stations: 25 | docks range: 12 to 30
size legend values: 12, 20, 30