Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

face with D3.js!

Public visualization

face with D3.js!

0 stars0🌍 Public
RRena Patel
Last edited Feb 13, 2025
Created on Feb 13, 2025

This example demonstrates how to build an animated smiley face using D3.js, manipulating SVG elements such as circles, rectangles, and paths. The face has two eyes and eyebrows that move up and down in a looping transition, while a fixed mouth is drawn using a D3 arc generator. The code uses D3 selections and the `transition` API with `duration` to animate the eyebrow group’s transform attribute, showcasing fundamental DOM manipulation. Rendered entirely in SVG, the face is centered within a 960×500 viewport, with styling defined in a separate CSS file.

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