Skip to main content
SimilarExport ZIP
100%

color and size legen

✓ Published0🌍 Public
Nntds12
Last edited Mar 24, 2020
Created on Mar 24, 2020

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.

AI-generated description
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

This example demonstrates how color and size can encode categorical differences in data, using a simple fruit bowl visualization. It shows apples and lemons as circles, where color distinguishes fruit type and radius encodes size, with legends implied through the shapes themselves. The code uses d3.scaleOrdinal for both color and radius mappings, and builds the SVG scene with d3-selection methods. The visualization is rendered using D3 v5, with fruit data drawn as circles and text labels inside a rounded rect bowl.

Hhugomell
87% match
Loading thumbnail…

Color and size legends - test

This example demonstrates a static SVG visualization of fruit types in a bowl, using both color and size to distinguish between apples and lemons. It renders fruit as circles with radius and fill color determined by category, alongside text labels for each fruit. The code uses d3.scaleOrdinal for both color and radius scales, and builds the scene through d3 selection and merging operations in the `fruitBowl` function.

MMukund Khandelwal
87% 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
87% 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
87% match
Loading thumbnail…

D3 Color and Size Legends

This example demonstrates D3 color and size legends through an interactive fruit bowl visualization. Apple and lemon icons are rendered as SVG circles with red and yellow fills via `d3.scaleOrdinal`, while their radii vary between 50 and 25 pixels. The code uses a general update pattern with enter/merge/exit selections to animate changes in the fruit array over time, including removals and type substitutions. Static legends for color and size scales are created alongside the visualizations.

Ccaedcagt76@gmail.com
86% match
Loading thumbnail…

Fork of Bowl of Fruit - Click to select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and recolored over time. It shows how D3’s data join pattern, using `selection.data` with a key function on `id`, updates circle elements with smooth transitions via `transition().duration(1000)`. The code uses `d3.scaleOrdinal` for color and radius mapping, and `d3.range` to generate initial fruit data. Each fruit’s position is calculated by its index, with apples rendered larger and red, lemons smaller and yellow, all rendered as SVG circles in a 960x500 canvas.

CClara Hu
85% match
Loading thumbnail…

Color and Size Legends

Five apples of two potential fruit types sit in an SVG bowl and respond to mouseovers. A blue stroke highlights the selected fruit, while two ordinal scales map fruit type to color and size, shrinking an apple into a lemon. The fruitBowl.js component uses d3.scaleOrdinal and transition().duration(1000) to animate circle radii and positions on entry and exit. Array modifications drive the animation over five seconds.

ZZhi Guangda
85% match