Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

422ff8e7792b4726843b1c6332c83a19

Let's make a face with D3.js!

0 stars1🌍 Public
Jjesramyep1263
Last edited Mar 31, 2020
Created on Mar 29, 2020

This example shows a dynamic fruit bowl visualization where fruits appear, disappear, and change type over time, with clickable fruits that become selected and highlighted. Using D3.js v5, the code demonstrates core DOM manipulation through data joins, transitions, and event handling. The `fruitBowl` function leverages `scaleOrdinal` for color and radius mapping, while `selection.enter()`, `.merge()`, and `.exit()` manage enter/update/exit patterns. SVG shapes including circles, rects, and text elements update with staggered transitions triggered by `setTimeout` calls, showing how D3 binds data to visual elements and animates changes.

AI-generated description

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