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)

585085a8930d41a88fbfb38eaad08f02

Let's make a face with D3.js!

0 stars2🌍 Public
LLeonardo Borges Firmino
Last edited Dec 24, 2019
Created on Dec 20, 2019

A smiley face is built from SVG shapes, with a yellow circle for the head, two dark eyes, and an arc-based mouth. The eyebrows, rendered as rectangles, animate up and down in a looping transition to give the face a playful expression. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, while `transition.duration` animates the eyebrow group’s transform. All elements are appended to a group centered within an SVG canvas, demonstrating basic DOM manipulation with D3.

AI-generated description

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