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)

63de2fb1c7f54f18a6cc64ac87604e6b

Let's make a face with D3.js!

0 stars0🌍 Public
VVerdidk
Last edited Dec 8, 2020
Created on Dec 8, 2020

A smiley face drawn with D3.js animates its eyebrows in a looping up-and-down motion. The example demonstrates fundamental SVG construction using D3 selections and shape generators, building the face from a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows transition vertically via chained `transition().duration()` calls, while `d3.arc` computes the mouth path. The code uses `select` and `arc` from D3 v5, with all elements positioned through SVG attributes.

AI-generated description

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