Date Ticks

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.

80% match

Axis Transition

A linear x-axis centered vertically in a full-screen SVG repeatedly updates its domain to a random value between 10 and 10,000 every second. Each update triggers a smooth transition of the axis tick positions using D3 v4’s `d3.interval` and the `.transition().call(x_axis)` pattern with `d3.axisBottom`. The example is built with the `d3-marcon` helper library for margin conventions and renders purely as a demonstration of animated scale-domain changes.

FFrissAnalytics

tick-values

This example demonstrates how to customize tick placement on a D3 time scale axis to avoid unwanted adjacent date labels at year boundaries. The chart uses an SVG renderer with D3 v3’s `d3.svg.axis` and `d3.time.scale`, filtering daily ticks from `d3.time.days` to show every other day. A custom `tickValues` array selects even-indexed dates, while the `is_problematic` function colors tick labels red for the 31st and 1st of the month, highlighting the end-of-year gap issue. The data is hardcoded ISO date strings, and the rendering relies on D3’s native SVG text and line elements.

11wheel

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.

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

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.

78% match

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.

78% match

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`.