Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Iidwann-eng
Last edited Mar 16, 2020
Created on Mar 16, 2020

This example shows a simple cartoon face built with D3.js v5 and React, rendered as SVG with animated eyebrows. It uses `d3.select` and `d3.arc` to create the face shape, eyes, and mouth, while `transition().duration()` animates the eyebrows up and down repeatedly. The face is centered using SVG group transforms, with fixed pixel offsets for eye spacing and brow placement. No external data is used; all geometry is defined directly in code.

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

Lets make a face with D3.js!

This example presents a simple, animated face built entirely with D3.js v5 in a React framework. It shows how to construct facial features—eyes, eyebrows, and a mouth—from basic SVG shapes like circles, rectangles, and an arc path, all positioned within an SVG canvas. The code uses D3’s `select`, `arc`, and `transition` APIs to draw the elements and animate the eyebrows repeatedly up and down. The face is centered via a group translation, with eye spacing and brow offsets controlled by constants.

Ddanhuijia
95% match
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
95% 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!

A cartoon face built with D3.js v5 animates its eyebrows in a looping motion. The SVG face includes a circle head, two grey eyes, and a mouth drawn using the `arc` path generator. Eyebrows are rectangles that shift vertically through chained `transition().duration(2000)` calls. The code selects the SVG, centers a group with a transform, and uses React-style imports for `select` and `arc`.

Vvic126
94% match
Loading thumbnail…

Let's make a face with D3.js!

A cheerful cartoon face built from SVG shapes appears, with eyes, animated eyebrows, and a smile. The eyebrows continuously slide down and back up using chained D3 transitions. The example demonstrates composing geometric primitives—circles, rectangles, and an arc-based mouth—within a centered group, all rendered in clean SVG. It uses D3 v5's selection and arc APIs, with React as the surrounding framework and JavaScript handling the animation.

Mmatthewfresh
94% match
Loading thumbnail…

Let's make a face with D3.js!

This visualization assembles a cartoon face from basic SVG shapes, depicting animated eyebrows alongside static eyes, a mouth, and a yellow circular head. The code constructs the face using D3.js v6 within a React framework, leveraging method chaining to position elements like the eyes and brows. Eyebrows transition vertically over two seconds via D3 transitions, while a mouth is drawn using the `arc` API to generate a path. The SVG canvas is 960 by 500 pixels, and all elements are centered using a translated group.

Jjsrussell11
94% match