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)

a1c8d69dba6743cda6ca1ceb0e576f56

Let's make a face with D3.js

0 stars3🌍 Public
SSwetha Susan George
Last edited Aug 13, 2020
Created on Aug 13, 2020

This example uses D3.js to draw a simple cartoon face out of SVG shapes, including a yellow circle for the head, black eyes, and a mouth formed with an SVG path built from an arc generator. The eyes animate by using D3’s `transition().duration()` to smoothly increase their radius from 20 to 30 pixels. The code imports `select` and `arc` from D3 v5, centers the group using a translate transform, and renders everything within a static SVG canvas. The face is purely illustrative, with no external data source.

AI-generated description

A bare minimum HTML page.

See also React Starter.