An axis is a visual reference that helps people read the numbers or categories in a chart. A horizontal x-axis can show time or categories, while a vertical y-axis can show a measured value such as temperature. Axes, labels, and legends need planned space around the chart, so charts commonly reserve margins before drawing data marks. section 4.1 section 4.1.2
In D3, an axis generator receives a scale and creates the SVG elements for an axis. The scale maps a data domain to chart-space positions: a time scale can position dates across the inner width, and a linear scale can position temperatures from the bottom upward. Create the scale first, then create and place the axis. section 4.1.2
Build and refine an axis in a chart:
- Reserve an inner chart area with margins for axes and labels. section 4.1
- Define a scale with a domain from the data and a range matching the inner chart dimension. section 4.1.2
- Create a bottom or left axis from that scale, append a group, and translate it into position. section 4.1.2
- Format tick labels and adjust their text styling or position when readability needs improvement. section 4.1.2
Temperature line chart
A time scale maps the first and last dates to the chart width for a bottom axis. A linear scale maps temperatures from 0 to the maximum temperature across an inverted y-range for a left axis. Formatting the time ticks as abbreviated months makes the horizontal labels easier to scan. section 4.1.2
Axes can also be built manually in React rather than with D3’s axis generator. A bottom axis renders its main line, calculated ticks, short tick lines, and text labels; a left axis applies the same pattern vertically. The number of ticks can respond to the available chart width or height. section 8.6.1
Figure 4.9 SVG elements composing an axis
Inspect the SVG pieces of a generated axis: its main path, tick lines, and tick labels. section 4.1.2
