Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of fruits - nested element

Public visualization

Viewing a saved revision (read-only)

729ff3cb4bb1496f80799d563f55e797

Bowl of fruits - nested element

0 stars1🌍 Public
Aaxliao
Last edited Jul 13, 2019
Created on Jul 13, 2019

This example demonstrates a fruit bowl visualization with nested SVG elements, showing apples and lemons as colored circles with labels. It uses D3.js version 5 with a data join pattern, employing `selection.enter()`, `merge()`, and `exit()` to handle dynamic updates. The code uses `d3.scaleOrdinal` for both color and radius mapping, while `d3.range` generates the initial fruit array. Over timed intervals, the visualization removes fruits, changes a fruit type, and filters elements, showcasing how nested groups and child elements update responsively.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.