Ordinal Axis

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 4, 2012

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

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

80% match

Loading thumbnail…

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.

Mmbostock

80% match

Loading thumbnail…

ordinal mulit line curve

Ten simulated series of fruit values are plotted as smooth, curving lines across an ordinal x-axis of six fruit names. The lines progress from light gray to black based on their series index, showing increasing darkness with each iteration. The code builds a line chart using D3 v4 with d3.line, d3.curveNatural, and d3.scalePoint for the categorical axis, while d3.scaleLinear maps values to the y-axis. Random jitter is applied to each fruit's value per series, and the x-axis is rendered with d3.axisBottom.

PPatrick Wojda

78% match

Loading thumbnail…

D3 Fruits - scaleOrdinal

Three fruit categories—apple, lemon, and watermelon—are displayed as colored, sized circles that shift horizontally with animated transitions. Using `d3.scaleOrdinal`, the example maps each fruit domain to distinct size (`r`), fill color, and gap values that adjust the spacing between circles during the render. The SVG groups animate their `transform` position over one second via `transition().duration()`, while labels appear above each circle with matching offsets. The code imports from D3 v7 and relies on a custom render function to coordinate the ordinal scales and dynamic positioning.

YYoung Song

77% match

Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片

76% match

Loading thumbnail…

Axis (with nice)

This example displays a horizontal axis with five numerical tick marks, positioned below a short line of data points. The axis is generated using D3.js version 4.2.2, specifically the `d3.axisBottom` function, which is applied to a linear scale created with `d3.scaleLinear`. The scale’s domain is derived from the minimum and maximum of the sample data array using `d3.extent`, and its range is set to 600 pixels. The axis is rendered as an SVG group element, transformed to sit at a specified vertical position within the 700×100 pixel canvas. The page itself is a minimal HTML document with embedded JavaScript and uses the D3 library loaded from a CDN.

Ppanmenghan

76% match

Loading thumbnail…

Axis Labels

This example demonstrates how to add descriptive labels to both the X and Y axes of a basic scatter plot-like visualization. It uses D3.js to render and position text elements alongside the axis ticks generated with `d3.axisBottom` and `d3.axisLeft`. The code builds a linear scale for each axis, draws a gray inner rectangle as the plotting area, and places the axis labels with configurable offsets using SVG text elements. The visualization accepts parameters for label text, offsets, and margins, making it a reusable template for labeling axes in larger projects.

CCurran Kelleher

75% match