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)

d02bca6105aa480fb799f37f35ca1388

Let's make a face with D3.js!

0 stars1🌍 Public
Ccindy203cc
Last edited Sep 26, 2022
Created on Sep 18, 2022

This example builds a simple cartoon face from SVG shapes using D3.js v5, including circles for the eyes, rectangles for eyebrows, and a path generated with d3.arc for the mouth. The face is centered on a yellow circle, and the eyebrows animate vertically using chained transition.attr calls with a two-second duration each. The code selects the SVG element directly and applies transforms to group elements, demonstrating basic shape creation, layout, and animation in a declarative D3 workflow.

AI-generated description

An example including some commonly used features of SVG.