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)

839387b87266481e9e2114be422f9374

Let's make a face with D3.js!

0 stars0🌍 Public
CChristina-Young
Last edited Aug 11, 2019
Created on Aug 11, 2019

A D3.js smiley face is drawn with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a curved path for a mouth. The face is centered on an SVG canvas, and animated eyebrows and mouth move through a sequence of positions using D3 transitions with a two-second duration. The code explicitly uses D3's `select`, `append`, `attr`, and `transition` methods to manipulate DOM elements, building the face from primitive shapes.

AI-generated description

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