Let's make a face with D3.js!
This example constructs a smiling face from basic SVG shapes using D3.js v5, selecting the root `svg` element and appending a grouped hierarchy of circles, rectangles, and an arc-based mouth. The code uses D3’s `select`, `append`, and `attr` methods for DOM manipulation, with the mouth path generated via `d3.arc`. A two-stage `transition` with a 2000-millisecond duration animates the eyebrow group’s `transform` attribute, moving it downward and back, simulating expressive movement. The face is centered by translating a group to the SVG’s midpoint, with fixed pixel offsets controlling eye spacing, eyebrow size, and vertical placement.