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)

e2ba38c7f0324632b44f250638d2be1b

Let's make a face with D3.js!

0 stars1🌍 Public
Xxfqx92
Last edited Dec 1, 2019
Created on Dec 1, 2019

A yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

AI-generated description