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)

21fe4bd17e4c4497a3b63523218be573

Let's make a face with D3.js!

0 stars0🌍 Public
藤藤音裕理 Fujine Yuri
Last edited Oct 27, 2019
Created on Oct 26, 2019

A smiley face with animated eyebrows demonstrates core D3.js DOM manipulation. The code builds the face by selecting the SVG and appending grouped shapes—a yellow circle for the head, an arc for the mouth, and circles for the eyes. It then animates rectangular eyebrows using chained `transition().duration()` calls, moving them up and down in a loop triggered by the `on("end")` event. The example uses D3 v5 and relies on the `select`, `arc`, and transition APIs, with a separate `myBundle.js` file adding a gray background and a looping rectangle animation.

AI-generated description

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