Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Create a face with d3.js!

Public visualization

Viewing a saved revision (read-only)

e234567ffe0e491c80e3b35641efb5bb

Fork of Create a face with d3.js!

0 stars0🌍 Public
SShubham Kshetry
Last edited Oct 9, 2023
Created on Oct 9, 2023

This example uses D3 v7 to create an animated, smiling face entirely with SVG shapes. The scene is drawn on a yellow circle, with the code constructing separate groups for the eyes, eyebrows, and mouth using circles, rectangles, and a path built with D3’s `arc` function. The eyebrows animate with a chaining `transition` on the group’s `transform`, moving them up and down over two seconds. The visualization is rendered through D3’s selection and attribute methods, with an imported `arc` API defining the mouth’s curved shape.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.