Skip to main content
SimilarExport ZIP
100%

Let'd make a face with D3.js!

✓ Published1🌍 Public
Ppreetham
Last edited Jan 23, 2020
Created on Jan 23, 2020

A smiling face is drawn with SVG shapes, including a yellow circle, eyes, and a mouth created using `d3.arc()` with a custom inner and outer radius. The eyebrows are animated with `transition().duration(2000)`, moving up and down over two seconds using chained transitions on their `transform` attribute. Built with D3 v5 in a React framework, the visualization uses `select` and `arc` imports from the D3 library, with all elements appended to a centered `<g>` group within an SVG canvas of 960 by 500 pixels.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let'd make a face with D3.js!

This example renders a yellow, smiley face in SVG using D3.js v5 within a React framework. It uses `d3.select` to append and transform `circle`, `rect`, and `path` elements, with `d3.arc` defining the mouth. The eyebrows animate up and down via chained `transition().duration()` calls, while the static face elements are centered using SVG `transform` attributes. The data is hardcoded, and rendering relies on SVG shapes rather than external datasets.

Ppreetham
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face is drawn with SVG, using D3.js to generate circles for eyes and an arc for the mouth. The animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls on a group element. The code imports `select` and `arc` from D3 v5 and runs within a React framework, with the SVG canvas sized 960 by 500 pixels. Transforms center the face and position facial features relative to the middle of the canvas.

TThomas Seberechts
94% match
Loading thumbnail…

Let'd make a face with D3.js!

A yellow circle with eyes, eyebrows, and a mouth forms a cartoon face in SVG. D3.js v5 selections append the facial features, while a chained `transition().duration(2000)` animates the eyebrows up and down. The code uses `d3.select`, `d3.arc` (commented out), and attribute setters like `.attr()` and `.transition()` to build the static face and its motion. React hosts the D3 code, rendering into an SVG element with a fixed width and height.

Ppreetham
94% 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…

Let's make a face with D3.js

A smiling face built from SVG shapes animates in D3.js v5. A yellow circle forms the head, with eyes, animated eyebrows that move up and down via chained `transition` calls, and a mouth drawn as an arc path using `d3.arc()`. The code positions elements within a group translated to the canvas center, using fixed pixel dimensions for features.

Ppkcesar
94% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face is drawn as a yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth, all rendered in SVG. The animation uses D3 transitions to move the eyebrows up and down over two seconds. The code leverages `d3.select`, `d3.arc`, and SVG `circle`, `rect`, and `path` elements within a fixed 960×500 viewport, with the face centered via a group transform.

NNkwachi Abel
94% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face made of SVG shapes is drawn on a yellow circle, with eyes, eyebrows, and a mouth defined by D3.js selections and the `arc` generator. The eyebrows animate vertically via chained `transition().duration(2000)` calls, shifting down and then returning. The code imports `select` and `arc` from D3 v5, positions elements using `attr` with computed coordinates, and renders in a React-based HTML page with an SVG canvas.

JJaKokosz
94% match
Loading thumbnail…

Let's Make a Face with D3.js!

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.

Ggilbster
94% match