Skip to main content
SimilarExport ZIP
100%

Let's make face with D3.js

✓ Published2🌍 Public
Tthalissonns
Last edited Nov 26, 2019
Created on Nov 26, 2019

A D3.js v5 example renders a simple smiling face as an SVG, centering a yellow circle with black stroke for the head, two dark eyes, and a curved mouth built from an arc path. The face is constructed using D3's selection and arc APIs within a transformed group, while animated eyebrows—two rectangles—loop through a two-second transition that raises and lowers them repeatedly, creating a playful, expressive motion. The visualization relies entirely on declarative SVG attributes and D3's transition system for the timed animation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make face with D3.js

A D3.js v5 example renders a simple smiling face as an SVG, centering a yellow circle with black stroke for the head, two dark eyes, and a curved mouth built from an arc path. The face is constructed using D3's selection and arc APIs within a transformed group, while animated eyebrows—two rectangles—loop through a two-second transition that raises and lowers them repeatedly, creating a playful, expressive motion. The visualization relies entirely on declarative SVG attributes and D3's transition system for the timed animation.

Tthalissonns
100% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to construct a smiling face from basic SVG shapes. A yellow circle forms the head, while two smaller circles become the eyes. The code animates the eyebrows using chained `transition().duration()` calls, moving them up and then back down over two seconds. A mouth is drawn using the `arc()` generator from D3’s shape utilities, creating a curved path. All elements are positioned relative to the SVG center using a `g` transform, and the entire composition is rendered as static SVG with animated attributes.

MMichał Szumnarski
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn entirely with SVG shapes—a yellow circle for the head, two dark circles for eyes, a dark arc for the mouth, and two animated eyebrow rectangles. The example demonstrates basic D3.js shape generation and animation, using `d3.arc` to create the mouth path and chained `transition` calls to move the eyebrows up and down over repeated two-second cycles. It also shows how to position groups with `translate` transforms and select elements with D3's selection API.

KKaleb LaBarrie
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
94% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes, animated eyebrows, and an arc-shaped mouth forms a smiling face. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to append circles, rectangles, and a path built with `d3.arc`. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle animated expression. All elements are centered within an SVG of fixed dimensions using a translated group.

DDifan Gu
94% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver
94% match
Loading thumbnail…

Let's make a face with D3.js

This example builds a simple smiling face using D3.js SVG primitives, starting with a yellow circle for the head, two circles for eyes, and an arc path for the mouth. A group of rectangular eyebrows transitions upward and back down over two seconds using chained `transition().duration(2000)` calls, creating a subtle animation. The face is centered by translating a parent `<g>` element to the SVG’s midpoint, with all positioning handled via explicit `attr` values for coordinates and dimensions. The implementation relies on D3’s `select`, `arc` generator, and transition API, rendering entirely in SVG.

WWillkommen
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall in a looping two-second cycle. The example demonstrates core D3.js v5 DOM manipulation, using d3-selection methods like `select`, `append`, and `attr` to construct the face, and `transition` with a duration to move the eyebrow group. Rendered at 960 by 500 pixels, the face centers itself and draws a yellow circle, eyes, and an arc-based mouth using d3-shape's `arc`.

Ssunilkrishnav
94% match