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 stars1🌍 Public
Mmwhiten
Last edited Dec 4, 2020
Created on Dec 4, 2020
Forked from HTML Starter

This example builds a smiling face in SVG using D3.js v5, with a yellow circle for the head, two eyes, and an arc-shaped mouth drawn via `d3.arc()`. The eyebrows are rectangles that animate up and down repeatedly using chained `transition().duration()` calls, creating a winking or surprised effect. The entire face is centered by translating a group element to the middle of an 800×400 SVG canvas, with dimensions read from the SVG attributes and hard-coded offsets for facial features.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed