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)

c70f8fd011f941c7bfb3a1514c0df4c9

Let's make a face with D3.js!

0 stars0🌍 Public
AAXE
Last edited Oct 10, 2018
Created on Oct 10, 2018

A smiley face built with D3.js animates its eyebrows in a looping vertical motion. The example demonstrates fundamental DOM manipulation by selecting an SVG canvas and appending circles, rectangles, and a mouth path using `d3.select` and `d3.arc`. Eyebrow movement relies on chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute up and down. The face is centered via a translated `<g>` element, with static geometry defined by numeric constants for eye spacing, radius, and eyebrow dimensions.

AI-generated description

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