Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

93f15797e37a49aeb44a6d9ef909f503

Fork of Let's make a face with D3.js!

0 stars0🌍 Public
KKishore22cs072
Last edited Sep 22, 2023
Created on Sep 22, 2023

This example animates a smiling face drawn with D3.js, showing a looped sequence where the eyebrows rise and fall. It demonstrates core SVG manipulation by selecting the root `<svg>` element and appending groups and shapes, including circles for the face and eyes, rectangles for the eyebrows, and a path for the mouth, which is generated using the `d3.arc()` function. The animation is driven by a chain of `.transition().duration(2000)` calls that move the eyebrow group’s `transform` attribute between two vertical positions, using D3 v5’s built-in transition API. The face is centered via a `translate` transform, and the SVG canvas is a fixed 960×500 pixel space.

AI-generated description

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