Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published4🌍 Public
Iisaachowen
Last edited Aug 5, 2019
Created on Jul 6, 2019

A yellow circle face with black stroke, white eyes, and an arc-shaped mouth animates through a series of transformations. The eyes, pupils, eyebrows, and mouth scale, rotate, and shift position in sequence using D3.js v5 transitions with `transition.duration`. The SVG is centered via a `g` element translated to the middle of a 960×500 canvas. The code imports `select` and `arc` from D3, using `arc()` to generate the mouth path and chained transitions to create the animated effects.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a smiling arc mouth is drawn in SVG using D3 v5. The example demonstrates basic shapes and transitions, with the eyebrows moving up and down in a looping animation via chained `transition` calls. Code imports `select` and `arc` from D3, uses SVG attributes like `cx`, `r`, and `path` with an `arc` generator, and positions elements relative to the SVG center. Static eye circles and a mouth path complete the composition.

GGulrez
95% match
Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes uses D3.js to demonstrate fundamental DOM manipulation and chained transitions. A yellow circle, two eyes, and an arc-based mouth are drawn, while the eyebrows, rendered as rectangles, animate upward and then return to their original position via two sequential `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5, builds the face within a centered `<g>` group, and relies on plain SVG attributes for positioning and styling.

HHonza Cahlík
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, eyebrows, and a mouth forms a simple face in an SVG canvas. The code uses D3 v5 selections to build the shapes, with `d3.arc` generating the mouth’s path. A `transition` applies a two-second upward and downward movement to the eyebrow group, animating the face without any data input. All elements are centered via a translated `<g>` group, and the rendering relies strictly on SVG attributes and D3’s transition system.

Ffbudwill
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with red eyes and a black mouth is drawn in SVG using D3.js. The eyebrows animate up and down via chained `transition` calls, while the mouth is created with the `d3.arc` path generator. The face is centered using a `g` transform, and all shapes receive thick black strokes. The code uses D3 v5 selections and attributes to build and animate the static composition.

Mmorjyooo
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with red eyes and a black mouth is drawn in SVG using D3.js. The eyebrows animate up and down via chained `transition` calls, while the mouth is created with the `d3.arc` path generator. The face is centered using a `g` transform, and all shapes receive thick black strokes. The code uses D3 v5 selections and attributes to build and animate the static composition.

Mmorjyooo
95% 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
95% 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
95% match
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
94% match