Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
AAznaggar
Last edited Jan 7, 2020
Created on Jan 7, 2020
Forked from HTML Starter

This example builds a smiling face out of basic SVG shapes using D3.js v5. The face consists of a yellow circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc-generated path for the mouth, all centered within an SVG canvas. The eyebrows animate upward and then back down via chained `transition()` calls. The code imports `select` and `arc` from d3, demonstrating how to construct and position shapes with SVG attributes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js example assembles a smiling face from primitive SVG shapes: a yellow head circle, two eye circles, rectangular eyebrows, and a mouth formed by an annulus arc path. The scene is vertically centered using a group translation, and the right eyebrow demonstrates the library's chained transition API by animating its vertical position in two sequential 2-second movements. The code imports `select` and `arc` from D3 v5 and applies SVG attributes directly within a React-based build.

Jjcintolo
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle for the head, black circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and positioning shapes with the `attr` method. Eyebrows animate by using chained `transition().duration(2000)` calls to move their group vertically, first upward and then back to the original position. The example highlights D3’s `select` and `arc` APIs for creating and transforming visual elements.

QQiushi
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code constructs the face with `d3.select`, `append`, and `d3.arc` for the mouth path, while the eyebrows animate up and down using `transition().duration()`. All elements are centered within an SVG canvas using a translated group, and the rendering relies entirely on SVG attributes rather than external data.

VVito
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

Iidwann-eng
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

Iidwann-eng
94% match
Loading thumbnail…

Let's make a face with D3.js

This example shows a cheerful face constructed from basic SVG shapes—a yellow circle for the head, two smaller circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The code uses D3.js v5 selections to append elements to an SVG canvas, with a centered group translation for positioning. The left eyebrow and mouth animate via chained `transition().duration()` calls, altering their `y` and `d` attributes respectively. The mouth leverages `d3.arc()` to generate path data between two arc configurations, demonstrating shape interpolation.

Mmatteo1222
94% match