Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
KKaleb LaBarrie
Last edited Jul 27, 2021
Created on Jul 23, 2021

A smiling face is drawn entirely with SVG shapes—a yellow circle for the head, two dark circles for eyes, a dark arc for the mouth, and two animated eyebrow rectangles. The example demonstrates basic D3.js shape generation and animation, using `d3.arc` to create the mouth path and chained `transition` calls to move the eyebrows up and down over repeated two-second cycles. It also shows how to position groups with `translate` transforms and select elements with D3's selection API.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is constructed entirely from SVG shapes, with a yellow circular head, two dark eyes, eyebrows, and an arc-based mouth. The example demonstrates basic SVG composition and D3 selections, then animates the eyebrows by chaining `transition` calls to shift their vertical position. It uses D3 v5’s `select`, `arc`, and `attr` APIs to generate the mouth path and manage transform attributes. A centered `<g>` group positions all features, with fixed pixel constants controlling eye spacing and offsets.

Iianleekq
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling face using SVG shapes built with D3.js selections and the `d3.arc` path generator for the mouth. A yellow circle forms the head, with two dark eyes and rectangular eyebrows positioned via coordinate offsets. The eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` updates on the group’s transform. All elements are centered by translating a parent `<g>` based on the SVG’s dimensions, demonstrating fundamental DOM manipulation and data-driven styling without external data or force simulation.

Ssourcebox-bug
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes, animated eyebrows, and an arc-shaped mouth forms a smiling face. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to append circles, rectangles, and a path built with `d3.arc`. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle animated expression. All elements are centered within an SVG of fixed dimensions using a translated group.

DDifan Gu
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes demonstrates fundamental D3.js DOM manipulation. The code selects an SVG element and appends yellow circles for the head and eyes, black rectangles for eyebrows, and an arc-based path for the mouth. Using `d3.transition` with a two-second duration, the eyebrows animate upward and then back down, creating an expressive movement. The example uses D3 v5's `select`, `append`, and `attr` methods to build and update elements, with the mouth drawn via `d3.arc`.

KKhalid
96% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG demonstrates basic D3.js DOM manipulation and animation. Drawn with a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth, the face animates by moving the eyebrows upward and back down using chained `transition().duration()` calls. The example uses D3 v5’s `select`, `arc`, and `attr` methods to construct and style elements, with the eyebrow displacement triggered automatically on load.

RRoyCsuka
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes responds to a looping animated transition: the eyebrows move upward, hold, then return. The example demonstrates fundamental D3.js DOM manipulation, building the face from a yellow circle, two dark eyes, rectangular eyebrows, and a smile-shaped path generated with the `d3.arc()` function. D3.js v5 selects the SVG element, appends groups for coordinated positioning, and uses `transition().duration(2000)` to animate the eyebrow group's vertical offset. All elements are styled directly via attributes like `fill` and `stroke` within an 960×500 SVG canvas.

MMark Moesch
96% match