hpies

@hpies·2 public vizzes

Let's make a face with D3.js!

A yellow smiley face rendered in SVG is centered on a 960x500 canvas, with facial features constructed from D3.js geometric primitives: circles for the eyes, rectangles for the eyebrows, and a path using the `d3.arc` builder for the mouth. The eyebrows initiate a two-stage `transition` lasting 2000 milliseconds each, moving them upward and then back to their original position. The code employs `select` from D3 v5 and relies on attribute manipulation to position elements via `translate` transforms, demonstrating fundamental DOM creation and animation without external data.

Nov 21, 2019

Loading thumbnail…

Let's make a face with D3.js!

A face constructed from SVG shapes uses the D3.js `select` and `append` API to assemble a yellow circle, eyes, eyebrows, and an arc-based mouth. The code builds the figure by translating groups into position, then animates the eyebrows with a chained `transition().attr` call that moves them up and down over two seconds. The static geometry relies on D3's `arc()` generator for the mouth path, while the animation drives the two eyebrow rectangles through repeated attribute transitions.

Nov 21, 2019