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)

32cbf36baad949fc8aa0f0d0a4e72e8b

Let's make a face with D3.js!

0 stars0🌍 Public
Ssreeanthrds
Last edited Apr 17, 2020
Created on Apr 17, 2020

This example builds a yellow smiley face with D3.js, demonstrating basic SVG element creation and animation. A circle forms the head, with two eyes and a mouth drawn using the `arc` generator. The eyebrows, rendered as rectangles, automatically move up and down through chained `transition` calls set to a two-second duration. The code uses d3-selection to append and style shapes within a central group, transforming coordinates to center the face on the canvas.

AI-generated description

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