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)

33c002df02474560bc8ba58ec53538a9

Let's make a face with D3.js!

0 stars0🌍 Public
Ddktaylor916
Last edited Jun 9, 2020
Created on Jun 9, 2020

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiling face. A yellow circle forms the head, with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth. The animation uses D3’s `transition` method to repeatedly move the entire eyebrow group up and down over two-second intervals, creating a blinking effect. The SVG scene is centered using the `attr` transform, and all shapes are appended to the SVG canvas with hardcoded dimensions and positions.

AI-generated description

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