Bowl of Fruit

100%

Bowl of Fruit - Hover to Select

✓ Published0🌍 Public

Last edited Apr 23, 2020

Created on Apr 18, 2020

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruits LEGEND

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()`.

Vvladvaculin

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

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

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

86% match

Loading thumbnail…

Bowl of Fruit - Click to Select

A bowl of fruit demonstrates data joins with D3 v5, using an ordinal scale to assign colors and radii to apples and lemons rendered as SVG circles. As the underlying array changes over time—removing fruits, replacing one apple with a lemon, and filtering another—the visualization updates through enter, update, and exit selections. The `fruitBowl` module applies `scaleOrdinal` for both color and size, while `selection.merge` and `selection.exit` manage the transitions.

Tthanhtrant219

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

86% match

Loading thumbnail…

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

86% match

Loading thumbnail…

Bowl of Fruit - Hover to select

A fruit bowl visualization displays apples and lemons as colored circles. Hovering over a fruit highlights it with a black stroke, and the selection is cleared on mouseout. The code uses D3.js v6 with `scaleOrdinal` for color and radius mapping. Circle positions and radii animate via `transition().duration(1000)`, with enter and exit transitions growing or shrinking circles. The data, generated randomly, is updated through timeouts that remove or reassign fruit types, demonstrating dynamic SVG updates.

SShuyu Zheng

85% match