Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
ZZhi Guangda
Last edited Jul 24, 2019
Created on Jul 21, 2019

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.

AI-generated description

Click to Select

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples render as red circles in an SVG bowl, with yellow lemon circles appearing when an apple’s type changes. Hovering toggles a black stroke on the selected fruit, while timed updates remove and replace circles. The code uses `d3.scaleOrdinal` for colors, radii, and stroke states, with `selection.merge` and `transition.attr` animating enter, update, and exit circles. Data is generated randomly via `Math.random`, and interactions trigger `onClick` callbacks.

Aarths-glitch
88% match
Loading thumbnail…

Bowl of Fruit: Hover to Select

Five apples appear in a row on an SVG canvas, each rendered as a filled circle. Hovering over a fruit highlights it with a black stroke, and moving the mouse away removes the highlight. The example uses d3-selection’s data join and transitions to animate the circles’ entry, exit, and size changes as apples are eaten or replaced by a lemon. A color scale maps fruit types to red or yellow, while a radius scale distinguishes apple and lemon sizes.

Bbprokopowicz
88% match
Loading thumbnail…

Fork of Bowl of Fruit - Hover to Select

Five circles represent apples in an SVG bowl, rendered with d3 v5 via the `fruitBowl` module. Hovering an apple selects it with a black stroke, using `mouseover` and `mouseout` events that call `setSelectedFruit`. The `scaleOrdinal` color and radius scales map fruit types to red or yellow and sizes. Animated `transition` calls adjust circle positions and radii over one second, while `exit` transitions shrink removed fruits; timers replace an apple with a lemon and remove fruits.

AAnthony Zornig
88% match
Loading thumbnail…

Bowl of Fruit Click to select

Five apples and lemons are rendered as color-coded circles in an SVG bowl, with clicks selecting a fruit by highlighting its stroke. The visualization animates fruit removal, type changes, and reordering using D3 v5’s data join and `transition().duration()` for resizing radii. Positions are set via a simple index-based scale, with ordinal scales mapping fruit types to colors and sizes.

Ggilbster
88% 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
88% match
Loading thumbnail…

Bowl of fruit - hover to select

A bowl of fruit renders as five apples in SVG, with hover highlighting the selected fruit by adding a black stroke. The code uses d3.scaleOrdinal for color and radius mapping, and transitions animate fruit entry, exit, and replacement. Over time, apples are removed and one becomes a lemon, with d3 data joins handling updates via keyed selection and transition.attr for radius changes.

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