Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Mmikeferri
Last edited Dec 31, 2021
Created on Dec 31, 2021

A playful SVG face built with D3.js animates when the page loads, flipping vertically and raising its eyebrows before settling back into place. The example demonstrates core D3 modules, using `d3.select` and `d3.arc` to construct the circular head, eyes, eyebrows, and mouth from primitive shapes. It chains `transition` and `attr` calls to animate the group containing the face and the eyebrow elements over two-second durations. The code imports `select` and `arc` directly from the D3 v7 library, which is loaded via UNPKG, and relies on SVG coordinates and CSS styling for presentation.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG animates its eyebrows up and down via D3 transitions. The visualization uses `d3.select` to manipulate the SVG, `d3.arc` to construct the mouth path, and chained `transition.attr` calls to move the eyebrow rectangles over two-second durations. The code demonstrates fundamental DOM manipulation with D3 v5, importing `select` and `arc` via ES6 modules, and lays out the face using hardcoded pixel offsets for the eyes, eyebrows, and mouth within a 960×500 viewport.

Ssfloyd11
91% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js to construct a simple animated face from SVG shapes. It shows a yellow circle as the head, two eyes, and eyebrows that move up and down via chained `.transition()` calls over two seconds each, plus a mouth drawn as an arc. The code relies on D3's selection API (`d3.select`) and the `d3.arc` generator to define the mouth's path, with all elements grouped and translated to center the face.

MMike Wolfgram
91% match
Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes uses D3.js to demonstrate fundamental DOM manipulation and chained transitions. A yellow circle, two eyes, and an arc-based mouth are drawn, while the eyebrows, rendered as rectangles, animate upward and then return to their original position via two sequential `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5, builds the face within a centered `<g>` group, and relies on plain SVG attributes for positioning and styling.

HHonza Cahlík
91% match
Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js selection methods to append and position circles, rectangles, and an arc-based mouth. The eyes and eyebrows are grouped and translated, with D3 transitions animating the eyebrow group upward and back over two seconds. The animation repeats once, moving the eyebrows through a vertical range to create a surprised expression. D3's `select`, `arc`, and chained `transition` and `attr` methods drive the DOM manipulation, while the page loads D3 v5 from a CDN.

AArcy Flores
91% match
Loading thumbnail…

Let's make a face with D3.js!

A friendly cartoon face is assembled from basic SVG shapes, with animated eyebrows that rise and fall. The example demonstrates reusable geometric primitives and declarative transitions in D3 v6. It uses `d3.select` and `d3.arc` to construct the mouth, while circles and rectangles define eyes and brows. The `transition().duration()` chain animates the eyebrow group’s transform attribute over two sequential two-second phases. Rendering targets an SVG canvas, with styles and layout handled by CSS.

EEdwin Cini
91% match
Loading thumbnail…

Let's make a face with D3.js

This D3.js example builds a cartoon face entirely out of SVG primitives—circles for eyes and the head, rectangles for eyebrows, and an arc path for the mouth. The face is centered in an SVG canvas using a group transform. The code animates the eyebrows with sequential `transition().duration(2000)` calls, moving them upward and back down. It relies on standard D3 v5 methods like `select`, `append`, and `attr`, using the `arc` helper to generate the mouth’s path data within the SVG.

WWhatTheFork85
91% match
Loading thumbnail…

Let's make a face with D3.js

This D3.js example builds a cartoon face entirely out of SVG primitives—circles for eyes and the head, rectangles for eyebrows, and an arc path for the mouth. The face is centered in an SVG canvas using a group transform. The code animates the eyebrows with sequential `transition().duration(2000)` calls, moving them upward and back down. It relies on standard D3 v5 methods like `select`, `append`, and `attr`, using the `arc` helper to generate the mouth’s path data within the SVG.

WWhatTheFork85
91% match