Ordinal Axis

100%

✓ Published0🌍 Public

Last edited Oct 11, 2018

Created on Oct 11, 2018

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.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3259783'>Ordinal Axis</a>

gpl-3.0 Licensed

Similar vizzes

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

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

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

Bowl of Fruit

This example demonstrates a simple data-driven fruit bowl visualization where apples and oranges are rendered as colored circles with text labels. The code uses d3.scaleOrdinal to map fruit types to colors and sizes, with SVG circles and text elements animated through D3’s enter/update/exit pattern. A timed sequence of snack events (eating an apple or swapping one for an orange) triggers re-renders. The implementation imports specific functions like scaleOrdinal and range from d3, with the fruitBowl module handling the selection joins.

YYifu Chen

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

75% match

Loading thumbnail…

Singular Element

This example demonstrates a simple fruit bowl visualization where apples and lemons are placed in a bowl using D3’s ordinal scales. The code uses `scaleOrdinal` for color and radius mappings, and `selectAll` with `merge` to manage SVG elements. Data is modified over time via timers, causing fruits to be added, removed, or replaced, with the chart updating accordingly. The SVG rendering uses `rect`, `circle`, and `text` elements, with styles defined in an external CSS file.

PPenguin-jpg

75% match

Loading thumbnail…

Simple Bar chart

This example shows a horizontal bar chart of fruit values sorted in ascending order. The chart uses D3 v3 with SVG rendering, mapping each fruit name to a y-axis position using `d3.scale.ordinal` and each value to a bar width via `d3.scale.linear`. The y-axis is drawn with `d3.svg.axis`, and bars are rendered as SVG `rect` elements with a label text appended to each bar.

JJonathan Liu

75% match