Skip to main content
SimilarExport ZIP
100%

Bowl of fruits LEGEND

✓ Published0🌍 Public
Vvladvaculin
Last edited Sep 10, 2019
Created on Sep 4, 2019

This visualization demonstrates two legends for a bubble chart: a categorical color legend mapping fruit types (apple, lemon, lime, orange) to colors via `scaleOrdinal`, and a quantitative size legend mapping numeric values to circle radii via `scaleSqrt`. The legends are built using D3 v5's selection API, appending SVG groups and circles. Hovering highlights the circles with a blue stroke. The data is synthetic, generated with `Math.random()`.

AI-generated description

Hover to see the details.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of Fruit - Hover to Select

A categorical color legend and a quantitative size legend sit side by side as SVG groups. The color legend uses `d3.scaleOrdinal` to map fruit names to red, yellow, green, and orange circles, while the size legend uses `d3.scaleSqrt` for circle radii from 0 to 50. Both legends are rendered via reusable functions that bind data to `g` elements, appending circles and text with `selection.enter()` and `selection.merge()`. The visualization demonstrates static legend construction without interactive behavior.

NNitin Bhagwat
89% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two custom legend components for categorical and quantitative scales, applied to a fruit-themed visualization. The color legend maps fruit types (apple, lemon, lime, orange) to distinct colors, while the size legend uses a square-root scale for proportional circle sizing. Built with D3 v5, it uses selection joins (`enter`, `merge`, `exit`) to handle updates dynamically, rendering SVG elements with `d3.scaleOrdinal` and `d3.scaleSqrt`. The code defines reusable functions for both legends, which are called on separate SVG groups with explicit spacing and text offsets.

Aaidanoconnor1
87% 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
85% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two reusable legend components for D3 visualizations: a color legend and a size legend. The color legend maps ordinal fruit categories (apple, lemon, lime, orange) to distinct colors, while the size legend uses a square-root scale to encode tick values as circle radii. Both legends employ the general update pattern, using selection joins with `enter()`, `merge()`, and `exit()` to handle dynamic data. The code uses D3 v5 APIs like `scaleOrdinal`, `scaleSqrt`, and `selection.selectAll` to render SVG circle and text elements with applied transforms.

AAbishek-Dulal
85% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

Two legends for ordinal and quantitative scales demonstrate D3's general update pattern with special cases. The color legend maps fruit categories to red, yellow, green, and orange circles using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to encode values 0–10 as circle radii, filtering out zero and reversing ticks. Both legends use reusable functions (`colorLegend` and `sizeLegend`) with enter, merge, and exit selections, rendering as SVG. The code relies on D3 v5 APIs including `selection.enter`, `selection.merge`, and `selection.exit`.

Jjrodgh
85% 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
84% 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
84% match
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates a "bowl of fruit" visualization using the general update pattern with special cases for legends. It renders separate color and size legends that display ordinal fruit categories and quantitative size scales. The code uses d3.scaleOrdinal and d3.scaleSqrt for color and size mappings, with enter/merge/exit selections to handle dynamic data updates. SVG elements (circles and text) are appended and updated through D3's selection API, with legends positioned using transforms.

Aaidanoconnor1
83% match