d3.time.scale nice

100%

d3.time.scale nice

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 9, 2012

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

80% match

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

78% match

Loading thumbnail…

Custom Time Format

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.

Mmbostock

77% 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

76% 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

74% match

Loading thumbnail…

Left-Aligned Ticks

This example shows a bottom-oriented time axis where tick labels are left-aligned instead of centered, placing each label to the right of its tick mark. The code uses a d3.time.scale with an extended domain and range, adding one month on each side to reserve space, and d3.svg.axis with the “bottom” orient. After rendering, a post-selection targets all text elements and sets x and y offsets with text-anchor “start” to shift the labels. The visualization renders as SVG with d3.v3.

Mmbostock

73% 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

73% match

Loading thumbnail…

Month Axis

A month axis displays a horizontal time scale spanning the year 2012, with a tick for each month. The code uses `d3.time.scale` to map a date domain to pixel coordinates, `d3.svg.axis` for the bottom-oriented axis, `d3.time.months` for tick spacing, and `d3.time.format` to render month abbreviations as labels. The SVG output places tick text to the right and below each mark.

Mmbostock

73% match