Let's make a face with D3.js!

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a smiley face from SVG shapes, with a gentle animation of its eyebrows. The code builds a yellow circle head, eyes, and a mouth using D3’s `select`, `attr`, and an `arc` generator for the path. The eyebrow rectangles transition vertically via chained `transition().duration(2000)` calls, moving them down and back up. It uses D3 v5, rendering to a static SVG canvas with no external data, focusing purely on programmatic element creation and animation.

Nnshedd

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

JJordan Chiu

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG shapes: a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental D3.js DOM manipulation and selection, using `d3.select` to append elements and `d3.arc` for the mouth path. Animated eyebrows move up and down via chained `transition()` calls with `attr` tweening over two-second durations, showcasing D3’s built-in animation capabilities without external data.

Aagongwpi

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7

Let's make a face with D3.js!

This example builds a smiley face with D3.js, demonstrating fundamental DOM manipulation and animated transitions. Using SVG elements, it constructs a yellow circle head, two eyes, rectangular eyebrows, and an arc-shaped mouth via the `arc()` generator. The code selects the SVG and appends groups to position features, then uses `transition().duration()` to animate the eyebrows upward and back down over four seconds. The example showcases D3 v5’s data-join-free approach, relying on direct selection, attribute setting, and chained transitions to create a simple, expressive character animation.

KKurt J Nilsen