Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Kkesmith21
Last edited Nov 29, 2020
Created on Nov 29, 2020

This interactive example shows a smiley face with animated eyebrows built using D3.js. The face is composed of SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth—all centered via a transformed group. The eyebrows move up and down using chained `transition` calls with a 2000-millisecond duration. The code uses D3 v5 selectors to query the SVG, `arc` to generate the mouth’s path, and direct attribute setters for positioning.

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!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG with animated eyebrows that move up and down. D3.js creates the face using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a central group. The animation uses chained transitions on the eyebrows group, alternating between two vertical offsets over two-second intervals. The code imports `select` and `arc` from d3 and uses an SVG container sized 960 by 500 pixels.

AAngelii
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js. The face is constructed from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth. The code uses D3 selections (`select`, `append`) and the `arc` generator, with `transition().duration()` to move the eyebrows up and down. The animation runs once, lifting the eyebrows 50 pixels and then returning them to their original position, demonstrating fundamental DOM manipulation with D3 v5.

PPhilippe Rigovanov
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built with D3.js, featuring expressive eyebrows that animate up and down over a two-second cycle. The face is constructed by manipulating SVG elements, including circles for the eyes and a path for the mouth, all grouped and positioned via translation transforms. The animation is driven by a chained sequence of `transition().duration()` calls, which move the eyebrows group along the y-axis. The code imports `select` and `arc` from D3, using the latter to generate the mouth’s arc path geometry.

Jjesramyep1263
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a smiley face in an SVG container, with eyebrows that animate up and down via chained transitions. The code selects the SVG, appends a centered group, and draws the yellow circle head, eyes, rectangular eyebrows, and a mouth path created with the `d3.arc` generator. Eyebrow motion is achieved through two sequential `transition().duration(2000)` calls that shift the eyebrow group’s transform attribute. The rendering relies on SVG elements and D3’s `select` and `arc` methods, with fixed numeric constants for spacing and sizing.

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

Let's make a face with D3.js!

A D3.js animation builds a smiley face from SVG shapes, then makes its eyebrows bounce repeatedly as a looped transition. The face is composed of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth positioned with SVG transforms. The code imports `select` and `arc` from D3 v5 to generate the mouth path and manipulate elements. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down, demonstrating basic DOM selection and animation without data binding.

Vveagy
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