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 stars4🌍 Public
PPiotr Paszek
Last edited Apr 19, 2021
Created on Apr 19, 2021
Forked from HTML Starter

A yellow circle becomes a cartoon face as D3.js draws two eyes, animated eyebrows, and an arc-based mouth inside an SVG. The code uses D3 v6 selections and transitions, with `transition.attr` to move the eyebrows up and down over two seconds. Eye positions and sizes come from hardcoded variables, while the mouth uses `d3.arc` with inner and outer radii. The face is centered via a group transform, and the eyebrows are rectangles that animate vertically, demonstrating simple SVG animation with D3’s transition API.

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