A horizontal axis, usually called the x-axis, runs left to right across a chart. It gives viewers a reference for the values or categories used to position marks horizontally. In a temperature line chart, it can show months while the vertical axis shows Fahrenheit; in other charts, it can place salary ranges, user counts, or discrete groups. section 4.1.2 section 6.4.2 section 8.6.1
Build the horizontal axis from a scale. The scale converts values in a domain into screen positions from 0 to the chart’s inner width. Choose a scale that matches the data: a time scale for dates, a linear scale for continuous numbers, or a scale that accepts discrete categories when positioning groups such as women’s and men’s box plots. section 4.1.2 section 6.4.2 section 6.2
In D3, a bottom horizontal axis follows a practical sequence:
- Create an x scale with a domain from the data and a range of [0, innerWidth]. section 4.1.2
- Create d3.axisBottom(xScale), append a group, and call the axis generator on it. section 4.1.2 section 6.2
- Translate the group by innerHeight so the axis moves from the inner chart origin to its bottom edge. section 4.1.2 section 6.2
- Format tick labels and style their SVG text when default labels do not communicate the data clearly. section 4.1.2
Months along a line chart
For monthly temperatures, find the earliest and latest dates, map them across the inner chart width with d3.scaleTime(), and pass that scale to d3.axisBottom(). Position the resulting group at the bottom of the plotting area. Formatting ticks as abbreviated month names improves readability; label positions can also be adjusted to center month labels between their ticks. section 4.1.2
const firstDate = d3.min(data, d => d.date); const lastDate = d3.max(data, d => d.date); const xScale = d3.scaleTime() .domain([firstDate, lastDate]) .range([0, innerWidth]);
This scale maps the first and last dates in a dataset to the left and right boundaries of the inner chart, providing positions for both marks and the horizontal axis. section 4.1.2
A horizontal axis is not limited to time. A histogram uses a linear x scale to place each salary bin by its lower and upper boundaries, while a box-plot chart uses horizontal positions for gender categories. In both cases, the axis labels tell viewers how to interpret the marks’ left-to-right placement. section 6.2 section 6.4.2
When rendering a chart with React, the same scale can drive a manually built bottom axis. Draw its baseline across innerWidth, derive a suitable number of ticks from available width, place each tick at scale(tick), and render centered text beneath it. This keeps axis rendering inside React components while D3 remains available for scale calculations. section 8.6.1
