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)

2d9fabe1c69f405d9ef889bdda93007b

Let's make a face with D3.js!

0 stars1🌍 Public
Ccpsshan
Last edited Jul 15, 2019
Created on Jul 15, 2019

This example demonstrates how D3.js can build an interactive smiley face by manipulating SVG elements, with animated eyebrows that move over time. The code uses `d3.select` and `selection.data` to bind fruit-shaped data to SVG circles and text, while `transition.attr` animates their positions and radii. A fruit bowl is rendered as an SVG rectangle, and ordinal scales like `scaleOrdinal` map fruit types to colors and sizes. The face updates through timed intervals that add, remove, or alter data, showcasing D3’s enter, update, and exit pattern.

AI-generated description

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