Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
VVerdidk
Last edited Dec 8, 2020
Created on Dec 8, 2020

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows and eyes. The face is composed of SVG circles, rectangles, and an arc-generated mouth, all positioned using SVG attributes. D3 transitions sequentially enlarge and contract the eyes while translating the eyebrow group up and down, creating a winking expression. The code uses D3 v5 APIs including `select`, `arc`, and chained `transition` calls to animate the elements on an SVG canvas.

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 a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger
97% match
Loading thumbnail…

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

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The face is constructed entirely with SVG elements, including circles for the eyes, rectangles for the brows, and a mouth path generated with the `d3.arc` shape generator. The eyebrows perform a continuous up-and-down motion using chained `transition` and `duration` methods. The code imports `select` and `arc` from D3 v5, applies attributes directly to SVG shapes, and uses template literals for transform translations.

AAdrian Lawrence
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example illustrates fundamental DOM manipulation with D3.js by building a smiley face from SVG primitives. A yellow circle forms the head, with two eye circles, a mouth path created using the `arc` generator, and rectangular eyebrows. The animation uses chained `transition()` calls to animate the eyebrow group's `transform` attribute upward and then back down over two seconds each, creating a simple moving expression. The code relies on `svg.append`, `.attr`, and D3's selection and transition APIs, rendering entirely through SVG without external data.

Mmariamy
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates D3.js v5 DOM manipulation. The code builds the face using SVG shapes, appending a circle for the head, two circles for eyes, rectangular eyebrows, and a path generated with the `arc()` function for the mouth. The eyebrows animate upward and downward over two seconds using chained `transition()` and `attr()` methods. This example highlights fundamental D3 selection, attribute setting, and transition functionality.

AA1L9E9X9
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG shapes, including eyes, eyebrows, and an arc-based mouth. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows moving up and down over a two-second cycle. Rendered in an SVG canvas, it highlights how D3 v5 binds data and updates attributes directly, with all elements positioned relative to a centered group.

Aabreudude
97% match
Loading thumbnail…

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

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js v5. The code selects an SVG element, appends circles for the face and eyes, rectangles for eyebrows, and an arc path for the mouth using d3.arc(). D3 transitions move the eyebrow group up and down over four-second intervals. Static SVG attributes set positions and colors, while the transition chain animates the transform attribute.

AAndrew Yan
97% match