Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Blank Canvas!

Public visualization

Viewing a saved revision (read-only)

3ee896959a4a47e8a23b8482107f9da5

Blank Canvas!

0 stars1🌍 Public
CChristine Lanser
Last edited Oct 7, 2020
Created on Oct 7, 2020

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows move. It first uses `d3.select` to target the SVG element, sets its dimensions based on the viewport, and appends a rounded rectangle as the canvas background. The code relies on basic SVG attributes like `width`, `height`, and `rx`, while the interactive eyebrow animation is driven by D3’s data-binding and update patterns, though the specific motion logic is not shown. The visualization highlights how D3 can directly control SVG structure from JavaScript.

AI-generated description

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