Skip to main content
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Mmattaouad
Last edited Jan 15, 2020
Created on Jan 15, 2020

A yellow smiley face is drawn on a dark background using SVG shapes, with animated eyebrows that rise and fall over two seconds. The example demonstrates fundamental D3.js v3 DOM manipulation by building the face with `circle` elements, a `rect` for each eyebrow, and a `path` created with the `d3.arc` helper for the mouth. The eyebrows are moved using chained `transition().duration()` calls, which shift the group’s `transform` attribute to create the up-and-down motion. All shapes are centered within an SVG canvas using a translated `<g>` element.

AI-generated description

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

MIT Licensed

Similar vizzes