ordinal mulit line curve

100%

ordinal mulit line curve

✓ Published0🌍 Public

Last edited Nov 7, 2016

Created on Nov 7, 2016

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.

AI-generated description

Built with blockbuilder.org

mit 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

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

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…

Color and Size Legends

A row of fruit shapes demonstrates how D3.js ordinal scales map categorical data to visual channels. The `scaleOrdinal` function assigns colors and radii to apples and lemons, while circles and text labels update through data joins. As the simulation runs, fruits are removed or replaced, triggering enter, update, and exit transitions that animate position, size, and color changes. Clicking a fruit selects it, highlighting it with a black stroke. The example uses D3 v5 and renders with SVG elements and transitions.

Iinroadings

75% match

Loading thumbnail…

D3 Bowl of Fruit - Click to Select

A dynamic scatterplot uses SVG circles to represent a bowl of fruit that changes over time. Apples and lemons are distinguished by color and size, and clicking a fruit selects it with a black outline. The visualization animates data additions, removals, and type changes using D3’s transition API with a one-second duration. The code imports `scaleOrdinal` and `select` from D3 v5, and initial fruit data is generated with `range` and `Math.random`.

Rrdeichert

75% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A line chart displays randomly generated scores over a sequence of dates, with the line’s stroke transitioning vertically through a multi-stop color gradient. The visualization uses d3.csv indirectly, but primarily relies on d3.scaleTime, d3.scaleLinear, d3.line with curveNatural, and d3.axisBottom/axisLeft. Data is created with Math.random and rendered as SVG, with an animated transition via d3.transition for the line path update.

EEvgeny

74% match

Loading thumbnail…

bowl of fruit

A bowl of fruit demonstrates animated data joins with D3 using ordinal scales to map fruit types to colors and radii. Apples appear as red circles, lemons as yellow ones, with text labels below each shape. The visualization uses `selection.data()` with a key function to track fruit identities, then applies enter, update, and exit selections as fruits are removed or changed over timed intervals. The code employs `scaleOrdinal`, `range`, and SVG rendering with `attr` and `merge` operations.

Jjlspangl

74% match

Loading thumbnail…

Scatter Plot

This scatter plot demonstrates animated transitions of fruit-shaped circles, updating as fruits are added, removed, or change type. The visualization uses D3 v5’s data join pattern with key functions, merging enter and update selections, while applying ordinal color and radius scales. A 1000-millisecond transition animates circle positions and radii when the dataset changes. The code imports `scaleOrdinal`, `select`, and `range` from D3, rendering SVG circles inside a 960×500 viewport, with transitions triggered by timed `setTimeout` modifications to the fruit array.

SSadafNaseem

74% match