Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Let's make a face with D3.js!

0 stars0🌍 Public
SSteveberrey
Last edited Dec 23, 2020
Created on Dec 23, 2020

This example builds a yellow smiley face with D3.js, animating its eyebrows upward and downward in a looping motion. It demonstrates fundamental DOM selection and manipulation using `d3.select`, `d3.arc` for the mouth, and chained `transition().duration()` calls to move SVG elements. The face is constructed from basic SVG shapes—circles, rectangles, and a path—positioned via `attr` transforms within a centered group. The code uses D3 v5 and renders entirely in SVG without external data.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed