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)

84d2e04e62294f29bce2196afadd5da9

Let's make a face with D3.js

0 stars1🌍 Public
Mmatteo1222
Last edited Sep 30, 2020
Created on Sep 30, 2020
Forked from HTML Starter

This example shows a cheerful face constructed from basic SVG shapes—a yellow circle for the head, two smaller circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The code uses D3.js v5 selections to append elements to an SVG canvas, with a centered group translation for positioning. The left eyebrow and mouth animate via chained `transition().duration()` calls, altering their `y` and `d` attributes respectively. The mouth leverages `d3.arc()` to generate path data between two arc configurations, demonstrating shape interpolation.

AI-generated description

A bare minimum HTML page.

See also React Starter.