Skip to main content
SimilarExport ZIP
100%

Let's Make a Face with D3.js!

✓ Published4🌍 Public
Ggilbster
Last edited Dec 26, 2019
Created on Dec 26, 2019
Forked from HTML Starter

A smiling face built from basic SVG shapes animates its eyebrows up and down over four seconds. The example uses D3.js v5 with the `select` and `arc` APIs to construct circles for eyes, rectangles for brows, and an arc-shaped mouth on a yellow head. React does not appear in the code; the visualization relies on D3 transitions to repeat the eyebrow motion, rendering entirely in SVG.

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!

A smiling cartoon face is drawn with SVG shapes using D3.js v5, featuring animated eyebrows that move downward and back upward over two seconds. The face uses a yellow circle, black stroke, and an arc-generated mouth with `d3.arc`. Code imports `select` and `arc` from D3, applying chained `transition().duration()` calls to animate the eyebrow group’s transform. React is noted in metadata, though the example runs as a standalone HTML page with a static SVG canvas.

Iidwann-eng
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered with SVG shapes animates its eyebrows in a looping bounce. The example uses D3.js v5 selections and transitions to build the face from circles, rectangles, and an arc path for the mouth. The `arc` generator creates the smile, while chained `transition` calls with specified durations move the eyebrow group and apply rotations. The React framework wraps the D3 code, which targets an SVG element sized 960 by 500.

LLongYuu
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows up and down in a looping motion. The example uses D3.js v6 to construct the face from circles, rectangles, and an arc-generated mouth, centered within an SVG canvas. D3 transitions drive the eyebrow animation by repeatedly updating the transform attribute of the eyebrow group. The code imports `select` and `arc` from D3, with hardcoded dimensions for the facial features.

VVinceVerspeek
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-style face built with SVG shapes, including two eyes, rectangular eyebrows, and a smiling mouth. The eyebrows continuously move upward and downward through a two-stage chained animation cycle. The face is constructed in D3 v5 using `d3.select` and `d3.arc`, with shape attributes set directly. A React starter is available, but the primary implementation uses plain D3 with SVG transitions to animate the eyebrow group’s translate transform.

CCyc-Evelyn
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with black eyes, animated eyebrows, and a curved mouth built from an arc path. The code uses D3 v5 selections to append SVG shapes, and chains `transition().duration()` calls to move the rectangular eyebrows up and down. The mouth is generated with the `d3.arc()` helper, specifying inner and outer radii and angular extents. Static circle elements define the face and eyes, while the animation runs once on load in a React framework.

Llittlenanopichu
94% match
Loading thumbnail…

Make a face D3.js

A smiling face rendered with SVG animates its eyebrows up and down. Built with D3.js v5 and React, the visualization constructs the face from basic shapes—circles for eyes, rectangles for eyebrows, and a path for the mouth—using D3's `select` and `arc` APIs. The eyebrows transition vertically via `transition().duration(2000)`, creating a playful, looping expression. The SVG canvas is 960 by 500 pixels, and the face is centered using a group transform.

Bbasskur
94% match
Loading thumbnail…

Lets make a face

A smiling face constructed from D3 shapes animates its eyebrows upward and downward in a repeating cycle. The yellow circular head, black-outlined eyes, and arc-based mouth are drawn as SVG elements using D3's `select`, `append`, and `arc` APIs. The face’s components are positioned via translation transforms, while the eyebrow motion relies on D3’s `transition` with a two-second duration. This React-framework example demonstrates animated SVG composition with D3 v5.

HHaifan Li
94% 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