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)

748aaa0406bc469c9992f2a3fd8b2ad8

Let's make a face with D3.js!

0 stars3🌍 Public
Ddacoylo
Last edited Jun 29, 2020
Created on Jun 29, 2020
Forked from Create Bar Chart

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

AI-generated description

A bare minimum HTML page.

See also React Starter.