Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bowl of Fruit-Click to Select

Public visualization

Bowl of Fruit-Click to Select

0 stars1🌍 Public
XX. N. Chu
Last edited Jun 22, 2020
Created on Jun 22, 2020

A bowl of fruit demonstrates interactive selection and animated updates in D3.js v5. Clicking a circle highlights it with a black stroke and updates a selectedFruit variable, triggering a re-render. The fruitBowl function uses data joins with enter, merge, and exit selections, applying transitions on circle radii and positions. Ordinal scales map fruit types to colors and sizes, while setTimeout calls animate changes like removing apples, replacing one with a lemon, and filtering the data.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed