Martin Lord

@MartDL·3 public vizzes

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes, including a circle head, two eyes, and an arc-based mouth, all centered via a transformed group. D3.js v5 selections append and style these elements, while a chained `transition` with `duration` settings animates the entire eyebrow group upward and then back down, making the expression shift. The example highlights basic DOM manipulation and transition timing with `select` and `arc`.

Apr 15, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an animated smiley face entirely from SVG primitives, with eyebrows that repeatedly rise and fall. The code constructs the face by appending circles for the eyes and a path generated with `d3.arc` for the mouth onto a centered `<g>` group. It uses D3 selections and the `transition.attrTween`-like chained `.transition().duration()` calls to animate the eyebrow group’s vertical position over two seconds, creating a looping expression change. The implementation relies on D3 v5’s select, arc, and transition APIs.

Apr 15, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiling face from basic SVG shapes, with its eyebrows repeatedly moving up and down. It demonstrates fundamental D3.js DOM manipulation by appending and styling circles, rectangles, and a path for the mouth. The code uses `d3.select`, `d3.arc` for the mouth, and chained `transition().duration()` calls to animate the eyebrow group’s transform attribute. The face is centered via a translated `<g>` element, with eye spacing and offsets defined as numeric constants.

Apr 15, 2020