Let's make a face with D3.js

100%

Let's make a face with D3.js

✓ Published0🌍 Public

Last edited Jun 6, 2021

Created on Jun 6, 2021

A yellow circle with a black outline forms a face, complete with two black eyes, rectangular eyebrows, and a mouth drawn as an arc. The right eyebrow animates upward over two seconds using D3's `transition()` method. The example uses D3 v6 modules `select` and `arc` within an SVG, constructing the face from primitive shapes and positioning them via a centered group transform.

AI-generated description

MIT Licensed

Similar vizzes

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 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

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 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

96% match

Loading thumbnail…

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Ppml31780

96% match

Loading thumbnail…

let's make a face with d3.js

A yellow circle face with black eyes, animated eyebrows, and a curved smile is drawn using D3.js v5. The example builds the face with SVG shapes, including `circle` and `rect` elements, and an `arc` path for the mouth. Eyebrows transition vertically up and down over two seconds using `transition.attr`. The code imports `select` and `arc` from d3, sets an initial SVG size, and groups elements around a centered translation.

BBun

96% match

Loading thumbnail…

Lets make a face with D3.js

A yellow circle forms a face with black eyes, rectangular eyebrows, and a semicircular arc mouth rendered as SVG shapes. The right eyebrow animates between two vertical positions using `transition().duration()`, while the mouth uses the `arc()` generator from d3-shape with specified inner and outer radii. The code imports `select` and `arc` from D3 v5, appends elements to an SVG canvas sized 960 by 500, and centers the face using fixed pixel coordinates. No external data is loaded; all shapes are directly defined in the script.

Llamiyaa

96% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn using D3.js v5. The SVG elements are centered via a translation transform, and the mouth is created with the `d3.arc` generator. The eyebrows animate up and down using chained `transition().duration()` calls, moving their group container's transform over two seconds each way. The code selects the SVG, sets dimensions from its attributes, and appends all shapes.

GGeolffrey S Mena

96% match

Loading thumbnail…

Lets make a face with D3.js

A yellow circle with black outlines forms a face, featuring two eyes and a mouth drawn as an arc. D3.js v5 uses `select` and `arc` to build the SVG elements, with the eyebrows animating via `transition().duration(2000)` to move up and down repeatedly. The face is centered using a translated `<g>` group, and all shapes are rendered as scalable vector graphics.

NNitin Vadhiya

96% match