liveBook · Manning

Time scale

As explained in D3.js in Action, Third Edition

A time scale maps continuous time-related input values to a continuous output range.

A time scale maps continuous time-related values to continuous screen positions. In D3, d3.scaleTime() positions dates along a chart axis by translating a date domain into a pixel range. section 4.1.2

For a line chart, derive the domain from the first and last dataset dates, then map it across the chart’s inner width. Pair the x-axis time scale with a linear temperature scale for the y-axis. 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]);

Builds a time scale from the dataset’s earliest and latest dates, mapping them to the inner chart width. section 4.1.2

How D3.js in Action, Third Edition covers it

How deep it goes
Explains continuous input and output, domain and range setup, and integration with axes without descending into scale internals.
Examples
Uses a temperature line chart whose x-axis spans dataset dates and whose y-axis displays Fahrenheit temperatures.
What it assumes
Assumes familiarity with D3 scales, domains, ranges, chart dimensions, and date-valued datasets.
What you can do after
Apply it via D3 to map dataset dates onto a chart’s horizontal drawing space.
How it connects
Connects continuous scales, linear scales, dataset domains, pixel ranges, and D3 axis generators.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.