Tick Format

Fork of D3 Axes - Tick Label Formatting

This example demonstrates how to format tick labels on a D3.js axis using custom tick formatting. A linear scale maps a domain of 0 to 100 to a pixel range, and an axis bottom is configured with increased tick padding and size. The axis is customized by limiting the number of ticks to four and applying a custom `tickFormat` function that appends a percent sign to each value. The resulting SVG renders the axis with labeled ticks showing the original data values with a “%” suffix.

SSubhendu Karmakar

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

78% match

Superscript Format II

A log-scaled axis spans from 10⁻⁴ to 10⁴, with tick labels that display only the number 10 for each power of ten. The code uses d3.svg.axis for the axis, then post-selects tick text elements, filters for powers of ten, and appends a tspan for the superscript exponent. The exponent is computed from the tick value using Math.log and rendered with a smaller font size via CSS. This approach creates a clean, typographically precise axis label alternative to Unicode superscripts.

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.

Zero Ticks

This example demonstrates a minimal SVG axis from D3 v3 that displays only the domain path, with tick marks and labels completely suppressed by setting `ticks(0)`. The axis is rendered using `d3.svg.axis`, oriented to the bottom of a chart area defined by fixed margins, and styled with a black stroke and crisp edges. The underlying scale is a `d3.scale.identity`, mapping a width-based domain to pixel coordinates. The visible output is a single horizontal line, highlighting how axis components can be selectively hidden while retaining the baseline.

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.

Superscript Format

A log-scale axis displays powers of ten from 10⁰ to 10⁹, with tick labels formatted using superscript characters (⁰¹²³⁴⁵⁶⁷⁸⁹) via a custom `formatPower` function that maps each digit to its Unicode superscript equivalent. The example uses d3.v3's `d3.scale.log` and `d3.svg.axis`, with tick formatting defined by a custom function passed to `.ticks(10, ...)`. The SVG rendering places the axis with generous top and bottom margins, and the code notes the vertical alignment issue between superscripts and normal digits.

76% match

Extent Ticks

This example demonstrates how to display axis ticks at the extent of a scale, showing only the minimum and maximum values along the bottom of a chart. The visualization uses an identity scale to map the domain directly to pixel coordinates within a specified width. The code relies on d3.svg.axis with explicit tickValues set to the scale's domain, rendering the result as SVG elements. A simple margin-based layout positions the axis within a 960 by 500 pixel SVG canvas.