Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
PPiotrekW2
Last edited Feb 26, 2019
Created on Feb 26, 2019

D3.js builds a smiley face from SVG shapes: a yellow circle, two eyes, rectangular eyebrows, and an arc-shaped mouth. The code uses `d3.select` and `d3.arc` to construct the face, then applies a chained `transition().duration(2000)` to repeatedly move the eyebrow group up and down, creating an animated expression. All elements are centered via a translation transform.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example shows how to build a smiley face with D3.js v5, using SVG shapes and animation to make the eyebrows move. A yellow circle forms the face, with two smaller circles for eyes and a path drawn with the `arc` helper for the mouth. The code uses `select` and `append` to create elements, and `transition().attr` to animate the eyebrows upward and back down over two seconds each way. The face is centered by translating a group element, with all dimensions derived from the SVG’s width and height attributes.

PPiotrekW2
97% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

Ppcbt1125
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

Ppcbt1125
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG elements, with two eyes, eyebrows, and a mouth created via D3.js shape generators. The eyebrows animate upward and back down in a repeating loop using chained `transition` calls with a 2000-millisecond duration. Built with D3 v5, the code uses `select`, `arc`, and attribute setters like `attr` to construct the face from circles and a path.

Mmmustafau
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is drawn with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a curved path for a mouth. The face is centered on an SVG canvas, and animated eyebrows and mouth move through a sequence of positions using D3 transitions with a two-second duration. The code explicitly uses D3's `select`, `append`, `attr`, and `transition` methods to manipulate DOM elements, building the face from primitive shapes.

CChristina-Young
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiley face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate by translating up and down in a loop using chained `transition()` calls with 2-second durations. The code demonstrates fundamental DOM manipulation via D3 selections, `append()`, and `attr()`, while the `arc()` generator from D3’s shape module creates the mouth path. All elements are centered using a translated SVG `<g>` group.

AAlain Jennotte
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face is built from SVG shapes, with a yellow circle for the head, two dark eyes, and an arc-based mouth. The eyebrows, rendered as rectangles, animate up and down in a looping transition to give the face a playful expression. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, while `transition.duration` animates the eyebrow group’s transform. All elements are appended to a group centered within an SVG canvas, demonstrating basic DOM manipulation with D3.

LLeonardo Borges Firmino
96% match
Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow smiley face is drawn in SVG with D3.js, featuring two eyes, animated eyebrows, and an arc-shaped mouth. The eyebrows transition upward and back down over four seconds using chained `transition().duration()` calls. The code builds the face by appending circles for the head and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` helper for the mouth, all grouped and translated to center the composition.

EEric Torres
96% match