Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Les make a face with D3.js

Public visualization

Viewing a saved revision (read-only)

29caca215e004beda857e8af3298469a

Les make a face with D3.js

0 stars2🌍 Public
Ddavidpiber
Last edited Nov 25, 2019
Created on Nov 16, 2019

This example builds a cartoon face using D3.js v5, rendering SVG shapes for the head, eyes, eyebrows, nose, and mouth. The face is centered and composed with circles, rectangles, lines, and an arc-generated path, all styled with static fills and strokes. The animation is driven by chained `transition().duration()` calls on the eyebrows group, which moves it up and down repeatedly. The code imports `select` and `arc` from the D3 module, and uses the SVG element’s width and height attributes to position the face.

AI-generated description

An example including some commonly used features of SVG.