Skip to main content
SimilarExport ZIP
100%

Let's make a face with d3.js!

✓ Published4🌍 Public
Ccheeson
Last edited Jul 30, 2020
Created on Jul 29, 2020

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows that move up and down, and a mouth drawn as an arc. Built with D3 v5, the example uses SVG elements like `circle`, `rect`, and `path`, with the mouth created via the `d3.arc` generator. The eyebrows transition vertically using `transition.duration`, while the face is centered using an SVG `g` transform.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and an arc-shaped mouth. The eyes and eyebrows are simple SVG circles and rectangles, while the mouth uses a path generated by D3's `arc` function. The eyebrows animate via chained `transition` calls, moving down and back up over two seconds each way. The visualization is built entirely with D3 v5, using its `select` and `arc` modules to render and manipulate SVG elements.

Ffredferramenta
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a mouth is drawn using D3.js v5. The code builds SVG elements directly, positioning a central circle, two eye circles, and eyebrow rectangles with a path for the mouth created via `d3.arc`. The eyebrows animate using chained `transition` calls over two seconds each, moving downward and returning upward. All geometry relies on computed spacing and offset constants, with the SVG centered via a `transform` attribute.

Fffrabal
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black outlines forms a smiling face, featuring two eyes, animated eyebrows, and an arc-shaped mouth. The code uses D3.js v5 to append SVG elements, including circles, rectangles, and a path generated with the `arc` generator. Eyebrows move vertically using chained `transition` calls, while the face’s structure relies on SVG grouping and translation transforms. The example demonstrates basic SVG rendering and animation techniques without external data.

NNathan Cheever
96% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with black strokes serves as a face, featuring two eyes, animated eyebrows that move up and down over two-second transitions, and a mouth drawn as an arc. The example demonstrates D3 v5's selection, transition, and arc generators to construct and animate SVG shapes. Eyebrows transition between vertical offsets using `transition().duration()`, while the mouth uses `d3.arc()` with specified inner and outer radii and angular extents. The SVG canvas is centered via a translation transform, and all elements are positioned relative to that origin.

Xxfqx92
96% match
Loading thumbnail…

Let's Make a face with D3.js

A yellow circle forms a face with two black eyes, eyebrows, and an arc-shaped mouth. The eyebrows animate upward and then back down repeatedly using chained `transition` calls on a `<g>` element. Built with D3 v5, the example selects the SVG, centers a group, and constructs shapes with `circle`, `rect`, and `path` elements. The mouth uses the `arc` generator with specified inner and outer radii and angles, all rendered as static SVG with JavaScript-driven animation.

Kkiyahw1
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and a curved mouth drawn using D3's `arc` generator. Eyebrow rectangles transition vertically via chained `transition().duration()` calls, moving down and back up over two seconds each way. The SVG is centered using a `g` element translated to the middle of a 960×500 viewport, with all shapes positioned relative to that origin. The example uses D3 v5, importing `select` and `arc` from the library.

Sscotti15
95% match