Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

563f233af4754acb90415b0eba49a755

Let's make a face with D3.js!

0 stars0🌍 Public
DDimitarDraganov
Last edited Jul 5, 2020
Created on Jul 5, 2020

This example demonstrates basic DOM manipulation with D3.js by building an animated smiley face from SVG shapes. It shows how to append and style circles for the face and eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows use chained `transition` calls to move up and down over two-second intervals, while the face is centered using a `g` element with a `translate` transform. The code imports `select` and `arc` from D3 and renders entirely in SVG.

AI-generated description

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