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)

65c05d92ebf941bdb2e69e352f603a14

Let's make a face with D3.js!

0 stars2🌍 Public
Mmariamy
Last edited Sep 18, 2019
Created on Sep 18, 2019

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.