Custom Time Format

100%

Custom Time Format

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 26, 2012

This example demonstrates a custom multi-scale time format for a D3 axis, showing how tick labels adapt to different time granularities—displaying milliseconds, seconds, minutes, hours, days, and months as the scale zooms. It uses `d3.time.format.multi` to define an array of format/filter pairs, applied via `d3.svg.axis`. The code generates an SVG chart with a single year-long domain, rendering tick labels dynamically based on the date’s precision. The data source is the current date, and the rendering relies on D3 v3’s SVG axis API.

AI-generated description

The tick format provided by d3.time.scale is a multi-scale tick format, meaning that it formats times differently depending on the time. For example, the start of February is formatted as "February", while February second is formatted as "Feb 2". The format is implemented using an array of time formats, each with an associated filter. The first filter that returns true is used. (In the implementation below, the formats are processed in reverse order.) You can create your own custom multi-scale time format using d3.time.format.multi.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Simple Custom Time Formats with D3 V4

This example demonstrates how D3’s time scale and axis can be customized to display different date-time formats depending on the temporal granularity, such as milliseconds, seconds, minutes, hours, days, weeks, months, or years. It uses D3 v4’s `d3.axisBottom` with a custom `multiFormat` function that conditionally applies format specifiers from `d3.timeFormat` based on the interval between ticks. The data domain spans a single day from January 1, 2000, rendered as an SVG with margins and a 960x500 canvas. The code leverages `d3.timeSecond`, `d3.timeMinute`, `d3.timeHour`, `d3.timeDay`, `d3.timeWeek`, `d3.timeMonth`, and `d3.timeYear` for comparisons, providing a clear hierarchy of time labels.

FFasani

88% match

Loading thumbnail…

Axis Styling

This example demonstrates how to customize the appearance of axes created with the d3-axis API in D3 v4, rendering SVG output. The chart shows a time-based scale on the x-axis spanning 2010–2012 and a linear scale on the y-axis ranging from 0 to 2 million. Customization is achieved through post-selection, where the code modifies generated axis elements by removing the domain path, styling tick lines with dashed strokes and gray color, and adjusting tick text positioning. A custom tick format prefixes the first value with a dollar sign and appends “million” while others use narrow non-breaking spaces. The code uses `d3.axisBottom`, `d3.axisRight`, `d3.scaleTime`, and `d3.scaleLinear`.

Mmbostock

81% match

Loading thumbnail…

Localized Time Axis II

A year-long time axis renders with Russian-language month, day, and time labels. The example uses `d3.timeFormatLocale` to define a custom locale and `d3.timeFormat`-based functions for millisecond, second, minute, hour, day, week, month, and year granularities. A single bottom axis, drawn with `d3.axisBottom` and `d3.scaleTime`, applies a multi-scale format via a `multiFormat` function that selects the appropriate label based on the date’s position within the year. No data is plotted; the SVG canvas shows only the axis.

Mmbostock

80% match

Loading thumbnail…

Extending the d3 Axis function

This example shows how to extend D3’s built-in axis component to customize tick styling—specifically, highlighting January ticks as bold, black year labels while other months remain gray. The custom `timeAxis` function wraps `d3.svg.axis`, reuses its scale and tick configuration, then reapplies a class to tick elements based on whether the date falls in January. It uses D3 v3 with SVG rendering, and the code includes a custom multi-format date formatter for month and year labels. The axis is drawn on a time scale spanning from July 2010 to April 2012.

HHerbCaudill

79% match

Loading thumbnail…

Date Ticks

This example demonstrates how D3’s time scale and axis API can animate date tick marks as the domain’s upper bound randomly shifts. A bottom-oriented SVG axis is created with `d3.time.scale` and `d3.svg.axis`, formatting tick labels as month/day strings. Every few seconds, `setInterval` triggers a transition that updates the axis domain to a new random date, smoothly redrawing the ticks and grid lines via `.transition().duration()`. The chart uses no external data, only a generated sequence of dates between January 2 and a random day in late January, with the axis centered vertically on a 960×500 SVG canvas.

Mmbostock

78% match

Loading thumbnail…

fresh block

A simple D3.js example displays a time-scale x-axis spanning from September 2012 to January 2013, with major ticks every 14 days formatted using a custom multi-level time format (`d3.time.format.multi`). The code sets a large top and bottom margin (250 pixels) to center the axis vertically within the SVG canvas. It renders a single SVG group containing the axis via `d3.svg.axis()`, with tick labels suppressed by the custom format function. The visualization demonstrates basic axis configuration and custom tick formatting without any underlying data or interactive behavior.

AA6Brgeuka

77% match

Loading thumbnail…

Tick Format

This example compares three ways to format tick labels on linear axes, each rendered as an SVG axis via `d3.axisLeft`. The left axis uses `scale.tickFormat` with an SI-prefix type (`"s"`), producing a consistent prefix across all ticks. The middle axis applies `d3.format(".0s")` directly, causing variable precision and prefix per label. The right axis uses `d3.formatPrefix(".1", 1e6)` to enforce a fixed mega-prefix, demonstrating manual control over SI formatting. The three axes share the same domain from -1e6 to 2e6.

Mmbostock

77% match

Loading thumbnail…

d3.time.scale nice

This example demonstrates D3’s automatic handling of time-based axis tick spacing using the `d3.time.scale` constructor. A blank SVG canvas with 100-pixel margins displays an empty bottom axis, whose tick intervals are computed via the `.nice(d3.time.week)` method to create evenly spaced, clean week boundaries. The code explicitly sets a domain of two `new Date` instances (both the current time), then maps that domain to a 760-pixel range. Rendering relies on `d3.svg.axis` for the axis and ticks, while the SVG is assembled via chained `d3.select("body").append("svg")` commands.

Mmbostock

77% match