tick-values

100%

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Jan 23, 2014

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.

AI-generated description

Is there a way to prevent the two subsequent odd-numbered days at the end of each year from generating adjacent ticks? In this case I would prefer a tick at Dec 29, Dec 31, Jan 2, Jan 4, etc.

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

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

77% match

Loading thumbnail…

Left-Aligned Ticks

A one-year time axis is rendered as a horizontal bar chart, with the gridlines extending downward and the tick labels left-aligned at the start of each year. The example uses D3 v3’s `d3.svg.axis` and `d3.time.scale` to generate the ticks, applying a `tickPadding(-2)` and adjusting the text `x` and anchor properties to shift labels right of the baseline. The SVG output contains a light gray rectangle for the plot area, white gridlines, and black tick marks.

Mmbostock

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

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

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

74% match

Loading thumbnail…

Ordinal Tick Filtering

This example demonstrates how to reduce clutter on an ordinal axis by selectively showing only every other tick label. The visualization renders an SVG axes with 52 letter-based categories, using `d3.scale.ordinal()` and `d3.svg.axis` with `.tickValues()` to filter the displayed ticks. The chart is generated with D3 v3, drawing black axis lines and labels in a plain HTML page.

Mmbostock

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