Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Let's make a face with D3.js!

0 stars0🌍 Public
HHernanls
Last edited Feb 23, 2020
Created on Feb 22, 2020

This example shows a yellow smiley face built with D3.js, featuring animated eyebrows that rise and fall. The code constructs the face using SVG primitives—a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. D3’s `select`, `attr`, and `transition` APIs handle DOM creation and the repeated eyebrow movement. The entire composition is centered within an SVG using a group transform, with eye spacing and offsets defined as constants. The animation runs on page load via chained transitions.

AI-generated description

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

Comments

Sign in to join the discussion.

MIT Licensed