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)

ed09c7460b1a46689ffbda6c5eeba67b

Let's make a face with D3.js!

0 stars1🌍 Public
LLucian-jw
Last edited Jul 2, 2019
Created on Jul 2, 2019

This example demonstrates fundamental DOM manipulation with D3.js by building a smiling face whose eyebrows move up and down. It uses D3’s `select` and `append` to create SVG circles, rectangles, and a path for the mouth, with the mouth drawn via the `arc` generator. The animation relies on chained `transition` and `duration` calls to shift the eyebrow group’s transform attribute. The code imports named methods from the d3 module and sets attributes like `r`, `cx`, and `d` directly on SVG elements.

AI-generated description

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