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)

01dd8cf3d35144498526335cc33ae024

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

0 stars0🌍 Public
Jjunior-armando
Last edited Feb 28, 2021
Created on Feb 28, 2021

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face whose eyebrows move up and down in a looping animation. The visualization uses SVG elements—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—centered within a 960×500 viewport. The code leverages D3 v5 selections, the `arc` generator for the mouth shape, and chained `transition().duration(2000)` calls to animate the eyebrow group’s vertical position. The face is static except for the eyebrows, showcasing how D3 binds data to visual properties.

AI-generated description

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