Skip to main content
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Nnvelden
Last edited Apr 11, 2020
Created on Apr 11, 2020

The smiley face drawing uses D3.js v5 to build and animate SVG elements, with eyebrows and a small circle that move in looping transitions. The code constructs a yellow head, eyes, eyebrows, and a mouth via `append()` and `attr()`, using `arc()` for the mouth path and `transition()` sequences with `.duration()` and `.on("end")` callbacks to repeat animations. The animation alternates the eyebrow group’s `transform` translation between two positions and rotates the circle’s `transform`, demonstrating fundamental DOM manipulation and timed attribute tweening in a simple, playful scene.

AI-generated description

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

MIT Licensed

Similar vizzes