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)

581eeae87b014b31926d13759ebb7c46

Let's make a face with D3.js!

0 stars0🌍 Public
BBraja Gopal Das
Last edited May 1, 2019
Created on Apr 8, 2019

This example shows a smiley face built entirely with D3.js that animates its eyebrows up and down. It demonstrates fundamental DOM manipulation by constructing SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas. The animation uses D3’s `transition()` method to move the eyebrow group between two vertical positions over two-second intervals. The code relies on D3 v5’s `select`, `arc`, and `transition` APIs to create the static face and its looping eyebrow motion.

AI-generated description

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