Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Let's make a face with D3.js!

0 stars1🌍 Public
Kkevgammer689
Last edited Mar 9, 2020
Created on Mar 8, 2020

This example demonstrates DOM manipulation with D3.js by rendering five colored circles representing fruit, then updating the visualization over time. It shows how `d3.select`, `d3.range`, and `scaleOrdinal` map fruit types to fill colors and radii, with circles initially positioned using hard-coded attributes. The code then uses `setTimeout` to remove a circle after one second and change a circle’s type from apple to lemon after two seconds, triggering updates through a custom `render` function that handles enter, merge, and exit selections. The example is rendered as SVG in a 960×500 viewport.

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