Ordinal Tick Filtering

Ordinal Tick Filtering

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.

91% match

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.

80% match

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

75% match

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.

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

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.

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

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.