Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Kkestefon
Last edited Nov 23, 2019
Created on Nov 23, 2019

This example uses D3.js v5 to construct a yellow smiley face from SVG primitives, including circles for the eyes and an arc path for the mouth. The most notable behavior is an animated eyebrow movement, achieved by chaining `transition().duration(2000)` calls to shift the eyebrow group’s `transform` attribute up and back down. The code demonstrates fundamental DOM manipulation via `select` and `append`, and uses the `arc` generator to define the mouth’s 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 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!

This example uses D3.js v5 to construct a smiling face from SVG primitives, with animated eyebrows that move up and down over time. The face consists of a yellow circle, two eyes, eyebrows, and a mouth drawn using an arc path. The animation is handled through chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute, creating a simple looping motion. The code relies on methods like `select`, `append`, and `attr` for DOM manipulation, along with D3’s `arc` generator for the mouth shape.

Vveagy
97% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a simple smiley face out of SVG shapes, with animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation through method chaining: appending circles and rectangles to construct the face, and using `transition().duration()` to move the eyebrow group. The code imports `select` and `arc` from D3 v5, and draws the mouth with the `arc()` path generator. A yellow circle with a black stroke forms the head, with eyes and eyebrows positioned via SVG transforms.

Ffaaty
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 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.

VVerdidk
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 creates a yellow smiley face from SVG primitives, then animates its eyebrows with a chained transition. Using D3.js v5, it selects the SVG, appends a centered group, and draws the face with circles, rectangles, and an arc-generated mouth. The `transition().duration()` calls move the eyebrow group upward and back, while `d3.arc` builds the mouth path from radius and angle parameters.

PPatrickHennessey
96% 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 primitives, complete with eyes, eyebrows, and a mouth. The eyebrows animate up and down using chained `transition().duration()` calls, shifting the eyebrow group’s `transform` attribute over two seconds. The code uses `d3.select` and `d3.arc` from the D3 v7 library, setting positions via `attr` and leveraging SVG circles, rectangles, and a path for the arc-based mouth.

黃黃歆善
96% 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
96% match