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)

7c96a6c0fd3c415980901b024bc61d72

Let's make a face with D3.js!

0 stars1🌍 Public
ÁÁlvaro Cáceres Muñoz
Last edited Feb 12, 2021
Created on Feb 7, 2021

A smiling face built from basic D3.js shapes animates its eyebrows upward and back. The visualization uses D3 v6’s `select` and `append` to construct SVG circles for the skin and eyes, rectangles for the eyebrows, and a `path` defined by `arc()` for the mouth. Eyebrow motion comes from chained `transition().duration().attr()` calls, transforming the eyebrow group’s vertical position. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the face’s center.

AI-generated description