D3 Fruits - scaleOrdinal

100%

D3 Fruits - scaleOrdinal

✓ Published0🌍 Public

Last edited Jun 23, 2022

Created on Jun 21, 2022

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.

AI-generated description

Using scaleOridinal for
- Size control
- Color control
- Gab control

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Color and Size Legends

Two fruits, apples and lemons, appear as colored circles inside a rounded bowl, with size and color encoding fruit type. D3’s `scaleOrdinal` maps apples to red and a 50-pixel radius, lemons to yellow and 30 pixels. New fruit groups animate in, growing from radius zero via a one-second `transition`, while exiting groups are removed. The static SVG renders the 600-by-300 bowl as a rounded rectangle, with labels positioned below each circle.

Ddanielchamone

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

84% match

Loading thumbnail…

Hey there, fruity!

Five apples appear as red circles in an SVG bowl, then shift through a sequence of updates: one disappears, another turns yellow and shrinks into a lemon, and a third is removed. The D3 data join uses `selection.enter`, `merge`, and `exit` with inline transitions, while `scaleOrdinal` maps fruit types to colors and radii.

OOhayouKaminari

84% match

Loading thumbnail…

Let's make a face with D3.js!

Five fruit circles animate in a row before the viewer, with apples and lemons distinguished by color and size. Hovering over a fruit highlights it with a black stroke, and fruits are removed or changed over time to illustrate dynamic updates. Built with D3.js v5, the example uses `scaleOrdinal` for color and radius mappings, and `transition().duration()` to animate position, radius, and removal.

Eemntd

84% match

Loading thumbnail…

Object constancy

Five fruits sit in a row as colored circles with labels, shifting position when an apple is removed or changed into a lemon. The d3 selection with a key function preserves each fruit’s identity across updates, while `transition().duration()` animates the circle’s radius to zero on exit and slides the remaining fruits to their new slots. `scaleOrdinal` maps fruit type to color and radius, and all rendering uses SVG.

Aalobry

83% match

Loading thumbnail…

color and size legen

This example demonstrates a simple fruit bowl visualization where apples and lemons are distinguished by color and size using ordinal scales. The scene begins with five apples and animates through state changes: one apple is eaten, an apple becomes a lemon, and another apple is removed. The code uses d3’s `scaleOrdinal` for color and radius mappings, with SVG circles and text labels bound to data via `selection.data`. The rendering logic in `fruitBowl` manages enter, update, and exit selections, while `setTimeout` calls trigger the sequential data updates.

Nntds12

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

83% match