Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Gguangyi1012
Last edited Jan 25, 2020
Created on Jan 25, 2020
Forked from Danil's many faces

A simple SVG composition uses D3.js v5 to build and animate an abstract face. It binds an array of animal objects with red, yellow, and green types to three rectangles via `d3.scaleOrdinal` and `d3.schemeCategory10`, with click handlers that modify the data. A circle is appended and animated using `transition.attrTween`-style chained `.transition().delay().duration()` calls, moving, resizing, and recoloring from black to green. The rendering is static at first, then transitions over two seconds, all within a 960×500 SVG canvas.

AI-generated description

Halfway through smiley face (datavis 2020)

MIT Licensed

Similar vizzes

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

Let's make a face with D3.js!

A face built from SVG primitives is drawn on a 960 by 500 canvas, with yellow circle head, black-outlined eyes, eyebrows, and a smile-shaped arc. The animation sequentially shifts the entire eyebrow group downward and then back upward over two seconds each using chained D3 transitions. The example demonstrates basic DOM manipulation via `d3.select` and `append`, constructing shapes with attributes, and moving elements with `transition().duration().attr()`, where the mouth is generated with the `d3.arc` generator.

Nnoelmiranda
88% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a simple animated face. The SVG rendering starts with a yellow circular face, then adds eyes, eyebrows, and a mouth using an arc path. The eyebrows move up and down through chained transitions, creating a subtle animated expression. The code demonstrates the use of `select`, `append`, `attr`, and `arc` APIs within an SVG container, showing how basic geometric shapes can be assembled into a recognizable character.

Xxfqx92
88% match
Loading thumbnail…

Let's make a face with D3.js!

A simple, animated face built with D3.js v5 appears on a blank SVG canvas. The code draws a large yellow circle for the head, adds two eyes and rectangular eyebrows, and constructs a mouth using the `d3.arc()` generator. The eyebrows animate through a two-stage `transition().duration(2000)` sequence, moving down and back up. The example demonstrates basic SVG shape creation, attribute manipulation, and chained transitions, with dimensions calculated from the container's width and height.

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

Let's make a face with D3.js!

A face made of SVG shapes is drawn and animated with D3.js v5, using a yellow circle for the head, green eyes, and black eyebrows. The code uses `d3.select` and `d3.arc` to construct the mouth, while chained `transition().duration()` calls animate the eyebrows upward and the mouth into a wider smile over two seconds. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the center via a translated `<g>` group.

AAnton Koukharski
88% match
Loading thumbnail…

Let's make a face with D3.js!

A face made of SVG shapes is drawn and animated with D3.js v5, using a yellow circle for the head, green eyes, and black eyebrows. The code uses `d3.select` and `d3.arc` to construct the mouth, while chained `transition().duration()` calls animate the eyebrows upward and the mouth into a wider smile over two seconds. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the center via a translated `<g>` group.

AAnton Koukharski
88% match