Skip to main content
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
CChetan Hebsur
Last edited Dec 4, 2019
Created on Dec 4, 2019

D3.js draws a yellow smiley face as a scalable SVG, centered in a 960×500 canvas. The face’s circular head, eyes, eyebrows, and arcing mouth are built by appending SVG primitives—`circle`, `rect`, and `path`—to a group. The example demonstrates core DOM manipulation with `d3.select` and `append`, while a chained `transition().duration(2000)` sequence animates the eyebrows, moving them up and down over four seconds. The mouth uses the `d3.arc` shape generator with specified inner and outer radii and angle ranges.

AI-generated description

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

MIT Licensed

Similar vizzes