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)

2b6fc7d7bcfc420292b4d45a69f89878

Let's make a face with D3.js

0 stars0🌍 Public
Pprudhvirajmudunuri
Last edited Jul 2, 2019
Created on Jul 2, 2019

A stylized yellow face drawn with SVG shapes animates its eyebrows and mouth. D3.js v5 constructs the face from circles, rectangles, and an arc-based path, grouping elements with `svg.append` and positioning them via `attr` transforms. The eyebrows move up and down through chained `transition().duration()` calls, while the mouth morphs from a frown to a wide open smile by swapping the `d` attribute computed with `d3.arc()`. All geometry derives from hardcoded constants in the script.

AI-generated description