milkfam

@milkfam·2 public vizzes

Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The code creates circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. D3 selections and `transition` with `attr` chaining move the eyebrow group up and down over two-second intervals. The example demonstrates fundamental DOM manipulation with `select`, `append`, and `attr`, and uses `arc` from D3’s shape module to define the mouth path.

Feb 21, 2021

Loading thumbnail…

Face with d3.js

A plain SVG face is drawn by appending a single circle to an empty SVG element using D3’s `select` and `append` methods. The circle’s radius and center coordinates are calculated directly from the SVG element’s width and height attributes, positioning it to fill the center of the 960×500 canvas. The example relies on d3.v6, with inline JavaScript in `index.js`, and uses no external data, instead deriving all geometry from the SVG’s own dimensions. The included CSS hides any page margins and overflow, keeping the rendered face clean.

Feb 21, 2021