A label identifies what a visual element or data value means. In D3 visualizations, labels can be SVG text positioned with scales or HTML text embedded inside SVG. section 4.3.2 section 11.2.3
Build readable labels by combining content, position, alignment, and selective display:
- Append a text element and set its content with text(). section 4.3.2
- Convert data values into coordinates with scales such as xScale() and yScale(), then add padding where needed. section 4.3.2
- Use dominant-baseline or alignment-baseline to control how text aligns with its coordinate. section 4.3.2
- Label only larger or important elements when many labels would reduce readability. section 11.2.3
- Use foreignObject with an HTML div when labels need automatic line wrapping. section 11.2.3
Temperature chart labels
A line chart can place “Average temperature” just after its final data point by mapping the last date and average value through the chart scales. Minimum and maximum labels can sit beside their corresponding area boundaries, with short connecting lines. section 4.3.2
