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)

dc2bce77b85b4a609d5aaad3db92c01e

Let's make a face with D3.js!

0 stars1🌍 Public
Ssourcebox-bug
Last edited Apr 10, 2019
Created on Apr 10, 2019

This example draws a smiling face using SVG shapes built with D3.js selections and the `d3.arc` path generator for the mouth. A yellow circle forms the head, with two dark eyes and rectangular eyebrows positioned via coordinate offsets. The eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` updates on the group’s transform. All elements are centered by translating a parent `<g>` based on the SVG’s dimensions, demonstrating fundamental DOM manipulation and data-driven styling without external data or force simulation.

AI-generated description

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