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)

8235063d617e4f00ac43ec2ceb719051

Let's make a face with D3.js!

0 stars0🌍 Public
Ssapan2997
Last edited Jun 29, 2020
Created on Jun 29, 2020

A D3.js animation builds a yellow smiley face centered in an SVG canvas, with eyebrows that repeatedly move upward and then return to their original position. The face is constructed from SVG circles for the eyes, rectangles for the eyebrows, and a path for the mouth generated with the `d3.arc` API. D3’s `transition` method animates the eyebrow group’s `transform` attribute over two-second intervals. The code uses D3 v5’s `select` and `append` functions to manipulate the SVG DOM directly.

AI-generated description

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