Ordinal Tick Filtering

100%

Ordinal Tick Filtering

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 22, 2013

This example demonstrates how to filter tick labels on an ordinal axis by displaying only every other letter. A D3 v3 SVG axis renders the alphabet from A to Z, with the tick format function returning null for odd indices to hide those labels. The axis uses d3.svg.axis with an ordinal scale and rangePoints, while the text and line styling come from standard SVG CSS classes.

AI-generated description

An example of filtering ticks on an ordinal axis.

gpl-3.0 Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Ordinal Axis

This example demonstrates how an ordinal axis displays categorical data along the x-axis, using fruit names as evenly spaced point labels. A single SVG graphic renders the axis with tick marks and text, created through D3.js v3’s `d3.scale.ordinal()` with `rangePoints()` and the `d3.svg.axis()` component. The code configures a bottom-oriented axis within a fixed margin and canvas size, styling labels via CSS.

Mmbostock

80% match

Loading thumbnail…

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

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

75% match

Loading thumbnail…

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.

Mmbostock

75% match

Loading thumbnail…

Ordinal Axis

This example demonstrates how to draw a simple ordinal axis using D3.js. It creates a bottom-oriented axis with four categorical values—apple, orange, banana, and grapefruit—positioned evenly across the chart width using the `d3.scale.ordinal` and `rangePoints`. The rendering is done via SVG elements, with axis ticks and labels styled through CSS classes. The code uses `d3.svg.axis` to generate the axis, and the margin convention places the axis within a fixed-size SVG canvas. The data is hardcoded as an array of fruit names, and no external data source is loaded.

FFrissAnalytics

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

Ordinal Brushing

A categorical scatterplot displays a set of SVG symbols representing `d3.svg.symbolTypes` along an ordinal x-axis. Brushing horizontally across the axis selects symbols by their categorical position, highlighting them with a red stroke while unselected symbols fade. The example uses an ordinal `d3.scale.ordinal()` and `d3.svg.brush()` to map brush extents to categorical values, demonstrating selection over a non-quantitative dimension. The code also relies on `d3.svg.axis()` for the ordinal scale, and applies CSS transitions to animate fill-opacity changes.

Mmbostock

71% match