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)

6f5a30e6e3654d0a8da9b56212bdbf68

Let's make a face with D3.js

0 stars1🌍 Public
JJaKokosz
Last edited Mar 29, 2020
Created on Mar 27, 2020

This example shows a yellow smiley face drawn with SVG shapes, where the eyebrows repeatedly rise and lower in a looping two-second animation. The face is constructed using D3 selections to append a circle, two eye circles, two rectangular eyebrows, and a mouth path generated with the `arc` helper. The animation is implemented by chaining `transition().duration(2000)` calls on the eyebrows group, toggling its vertical transform. All geometry is positioned relative to the center of the SVG using a translated group.

AI-generated description

A bare minimum HTML page.

See also React Starter.