Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published2🌍 Public
Aakanksha maheshwari
Last edited Feb 25, 2020
Created on Feb 25, 2020

This example shows a yellow smiley face built with SVG shapes, whose eyebrows animate upward and downward in a repeating bounce. The code uses D3 v5’s `select` and `arc` to construct the head, eyes, and mouth, with `transition().duration(2000)` driving the eyebrow movement. A centered `<g>` group positions all facial features relative to the SVG’s midpoint, while hardcoded offsets define eye spacing and eyebrow placement. The rendering relies entirely on SVG elements—circles, rectangles, and a path—with no external data source.

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 built with SVG elements in D3.js, whose eyebrows animate upward and downward in a looping transition. The code constructs the face using simple shapes: `circle` for the head and eyes, `rect` for the eyebrows, and a `path` generated with the `d3.arc` function for the mouth. D3 selections and the `transition().duration()` method drive the eyebrow movement, while the SVG is centered within a fixed 960×500 viewport using a translated `<g>` container.

Jjufrank
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face built with D3.js demonstrates basic DOM manipulation and animation. The code uses `d3.select` to target the SVG, appends circles and rectangles for the eyes and eyebrows, and constructs the mouth with the `d3.arc` generator. A chained `transition().duration(2000)` moves the eyebrow group up and down repeatedly, creating a bouncing effect. All shapes are drawn with SVG attributes like `cx`, `r`, and `x` without any external data source.

AAkarsh Jain
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, where the eyebrows animate upward and then back down in a looping motion. The face is centered using a translated `<g>` group, with circles for the eyes and a D3 arc path for the mouth. It demonstrates fundamental DOM manipulation with D3 v5, using `select`, `attr`, and chained `transition().duration()` calls to move the eyebrow group. The animation runs continuously, shifting the eyebrows vertically by 50 pixels before returning to their original position.

PPiotrekW2
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes whose eyebrows animate upward and then back down. It demonstrates basic DOM manipulation with D3.js. The code uses `d3.select` and `svg.append` to build the face's circle, eye, and rectangular eyebrow elements, while the mouth is drawn with the `d3.arc` path generator. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on the brows’ parent group, moving it up and then returning it to its original position.

Ccguibourg
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, featuring eyes, eyebrows, and a mouth rendered as SVG shapes. The code uses D3 selections to append a circle for the face, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. A chained `transition` with a 2-second duration animates the eyebrow group’s vertical position upward and then back, creating a moving-brow effect. The face is centered within a 960×500 SVG, and the animation runs once on page load.

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

Let's make a face with D3.js!

This example builds a yellow smiley face entirely from SVG shapes created with D3.js, including a circular head, eyes, and an arc-based mouth. It demonstrates fundamental DOM manipulation with selections and attribute setting. The two rectangular eyebrows animate by moving up and down using chained `transition().duration()` calls, which shift the eyebrow group’s transform. The code uses d3’s `select`, `arc`, and transition methods to construct and animate the face, calculating positions relative to the SVG’s width and height.

Kkb1ngram4
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built from SVG shapes, with its eyebrows smoothly sliding upward and then back down in a repeating animation. The code uses D3.js v5 selections to append a circle for the face, separate circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that update the group’s `transform` attribute.

Lliuleirain
96% match