Skip to main content
SimilarExport ZIP
100%

Circle Packs

✓ Published0🌍 Public
BBrett Cunningham
Last edited Nov 17, 2019
Created on Nov 17, 2019

A circle-packing visualization displays a horizontal row of fruit icons, each rendered as a colored circle with a text label, inside a rounded rectangular bowl. A color scale and a radius scale map fruit types to distinct hues and sizes. Users can add or remove apples via buttons, triggering enter, update, and exit selections that animate the circles through D3’s data join. The example uses D3 v5 with SVG, ordinal scales, and explicit selection methods to manage dynamic data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Bowl of fruit - Click to select

Five circles representing fruit appear in a row and animate to their full size. Clicking a circle selects it, drawing a black outline around that fruit. The example uses D3 v5 with data joins and transitions to update the visualization, while `scaleOrdinal` maps fruit types to colors and sizes. Over time, the data changes to remove fruit or change one apple to a lemon.

DDaniel García
86% match
Loading thumbnail…

bowl of fruit-click to select

Five circles representing apples appear in a row and animate into place, with a black outline highlighting the selected fruit. The data join in d3.v5 handles entering, updating, and exiting circles through transitions, as apples are removed, replaced with a lemon, and filtered over time. Clicking a circle triggers a re-render via the `fruitbowl` module, which uses `scaleOrdinal` for color and radius mapping, while SVG transitions animate the changes.

Ssingularity6033
85% match
Loading thumbnail…

Bowl of Fruit - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit selects it by adding a black stroke, while hovering away deselects it. The visualization uses d3 v5 with scaleOrdinal for color and radius, and the fruitBowl module binds data to SVG circles with enter, update, and exit transitions. A timer script removes and replaces fruits, demonstrating animated data updates over three seconds.

IIsabel
85% match
Loading thumbnail…

Fruit bowl

Five red circles are drawn inside an SVG to represent apples, with each apple positioned at an equal horizontal interval and vertically centered. The example demonstrates how D3.js manipulates the DOM by appending circles for an initial dataset and then removing the last apple when the data array shrinks. Using D3 v5’s `select`, `range`, and data join methods like `enter()` and `exit()`, the code explicitly separates data from graphical marks, showing how updates to the underlying array trigger corresponding visual changes.

YYuanting Mao
85% match
Loading thumbnail…

Click to Select - Bowl of Fruit

Eight circles representing apples are rendered as a bowl of fruit on a black background. Clicking a fruit selects it, highlighting that item with a white stroke. The visualization animates changes to the fruit list, with fruits being removed and their types changing from apples to lemons over time. Built with D3 v5, the example uses the `select`, `range`, and `scaleOrdinal` APIs to manage SVG rendering, size and color scales, and transitions between states.

JJames Malvern
85% match
Loading thumbnail…

Bowl of Fruit

This example demonstrates a simple data-driven fruit bowl visualization where apples and oranges are rendered as colored circles with text labels. The code uses d3.scaleOrdinal to map fruit types to colors and sizes, with SVG circles and text elements animated through D3’s enter/update/exit pattern. A timed sequence of snack events (eating an apple or swapping one for an orange) triggers re-renders. The implementation imports specific functions like scaleOrdinal and range from d3, with the fruitBowl module handling the selection joins.

YYifu Chen
85% match
Loading thumbnail…

Bowl of fruit. Click to Select

Five circles represent apples in a bowl, rendered as red SVG circles using d3.scaleOrdinal for color and radius. Clicking a fruit selects it, highlighting it with a black stroke. The visualization uses d3 transitions to animate enter, update, and exit states, with fruits shrinking to zero radius on removal. Over three seconds, the code programmatically removes apples and changes one to a lemon, demonstrating data joins with d3.v5.

AAlex Arobelidze
85% match
Loading thumbnail…

Fruit bowl

A fruit bowl demonstrates incremental updates to SVG circles using D3.js v5. Five apples first render as a row of red circles, then one apple is removed, and a later change turns one remaining fruit yellow. The code uses D3's `select`, `range`, and `scaleOrdinal` APIs, with explicit enter, merge, and exit selections to manage the changing dataset.

GGlenn Henshaw
85% match