Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
AAndrew Yan
Last edited Jun 4, 2020
Created on Jun 4, 2020

This gallery example builds a yellow smiley face in an SVG canvas using D3.js v5. The face is assembled from primitive shapes—circles for the head and eyes, rectangles for eyebrows, and a path for the mouth—all positioned via D3’s `select` and `append` methods. The animation uses D3’s `transition` API to move the eyebrows up and down over two seconds, demonstrating basic DOM manipulation and chained transitions. The code defines all geometry explicitly without external data, relying on D3’s `arc` generator for the mouth’s curved path.

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 builds a smiley face with D3.js, showing a yellow circle with eyes, eyebrows, and a mouth. The face is static, but the eyebrows animate by moving up and down using D3's transition system with `attr` transitions over 2000 milliseconds each. The code uses `d3.select` and `d3.append` to construct SVG elements, `d3.arc` to generate the mouth path, and `d3.transition` for the eyebrow animation. The SVG canvas is 960 by 500 pixels, and the face is centered using a group transform.

AAndrew Yan
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles, rectangles, and a path, centered on a 960-by-500 canvas. The face’s eyebrows animate upward and back down using chained `transition` calls with 2-second durations. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending grouped elements, and using the `arc` generator to shape the mouth. D3 v5 is loaded via a CDN, with `select` and `arc` imported from the library.

Mmoonstorm86
95% match
Loading thumbnail…

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
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple smiley face in an SVG canvas using D3.js v5, with a yellow circle for the head, two eyes, and an arc-based mouth. The code demonstrates basic DOM selection and manipulation via `d3.select` and `append`, alongside geometric positioning with `attr`. A notable feature is the animated eyebrows, which move up and down repeatedly using chained `transition().duration()` calls that alternate the group’s `transform` attribute. The example uses D3’s `arc` generator to draw the mouth and relies on plain SVG elements, showing how to combine static shapes with simple programmatic animation.

Cchenyucook
95% match
Loading thumbnail…

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
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js v5, complete with eyes, eyebrows, and a curved mouth, rendered as SVG elements. The code uses D3 selections and the `arc` generator to construct the face, then animates the eyebrows by chaining `transition().duration()` calls to move them up and down. Each facial feature is positioned using SVG attributes like `cx`, `r`, and `transform`, with the mouth drawn via the `arc()` path helper. The face is centered on a 960×500 canvas using a translated group element.

DD Lee
95% match
Loading thumbnail…

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
95% match
Loading thumbnail…

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
95% match