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)

a6cc851e93424f7faa9b2b3bdf559492

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

0 stars0🌍 Public
DDmytro Tyshchenko
Last edited Nov 19, 2021
Created on Nov 19, 2021

This example demonstrates a smiling face drawn with D3.js v5, using SVG shapes and a continuous animation to move its eyebrows. The code constructs the face from basic SVG primitives, including circles for the eyes and a path generated by the `d3.arc` API for the mouth. Eyebrow movement is achieved by chaining `transition().duration(2000)` calls, which animate the `transform` attribute of a group element back and forth. The visualization runs on an 960x500 canvas, centering the facial features with hardcoded offsets and using D3's DOM selection and manipulation functions.

AI-generated description

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