Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Make a Face

Public visualization

Viewing a saved revision (read-only)

a9b61092dd46439bb4bef8a018ce8241

Make a Face

0 stars1🌍 Public
Cchrisdreece
Last edited Jan 8, 2021
Created on Jan 7, 2021
Forked from Cars Report

A pink SVG face with blinking eyebrows and animated facial features responds to simple D3 transitions. The code builds the face by nesting grouped shapes—circles for the head, eyes, and nose, plus rectangles for the eyebrows and an arc-generated path for the mouth—within a central `<g>` element using D3 v6 selection and `arc` API methods. Eyebrows slide and stretch through chained `.transition()` calls, creating a playful, looping expression. All shapes are positioned relative to the group, keeping the face centered as it animates.

AI-generated description

Replicating the Cars Report from Curran's D3 Video:

  • Creates the report from the cars JSON data