liveBook · Manning

D3-time-format

As explained in D3.js in Action, Third Edition

d3-time-format is a D3.js module that formats and parses dates and times using pattern directives.

d3-time-format formats time-related values for D3 visualizations. Pass a directive pattern to d3.timeFormat(), then use the formatter where an axis expects tick labels. section 4.1.2

Format an axis with month labels

const bottomAxis = d3.axisBottom(xScale) .tickFormat(d3.timeFormat("%b")); The %b directive produces abbreviated month names, replacing D3’s default year-oriented label for January 1, 2021. section 4.1.2

const bottomAxis = d3.axisBottom(xScale)
  .tickFormat(d3.timeFormat("%b"));

Use the complete axis-formatting listing as a starting point for a visible D3 chart. section 4.1.2

How D3.js in Action, Third Edition covers it

How deep it goes
Defines directive-based formatting and demonstrates axis integration, but defers the complete directive list and parsing.
Examples
Uses abbreviated month labels on a bottom axis spanning dates in 2021.
What it assumes
Assumes familiarity with D3 axes and time scales while introducing time-label formatting through a concrete chart.
What you can do after
Apply d3.timeFormat() through D3’s tickFormat() method to produce readable time-axis labels.
How it connects
Connects time formatting with D3 axes, tick labels, and time scales.
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.