Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published6🌍 Public

Last edited Jul 21, 2020

Created on Jul 21, 2020

This example draws a simple, animated face entirely with D3.js v5 and SVG primitives. A yellow circle forms the head, with black circles for eyes and a path created using `d3.arc` for the mouth. The eyebrows are rectangles that animate up and down using chained `transition` calls, each with a 2000-millisecond duration, demonstrating basic declarative animation. The code uses `d3.select` and `d3.append` to build the SVG structure, and the rendering is fully vector-based.

AI-generated description

A Minimal Example illustrating the basic structure of a Vizhub visualization.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can construct a simple animated face using fundamental SVG elements. A yellow circle forms the head, with two circles for eyes and a path drawn using the `arc` generator for the mouth. The code uses `d3.select` and `d3.append` for DOM manipulation, while the `transition` method animates the eyebrows upward and back over two seconds each way. The face is centered via a group transform, and all shapes are rendered as SVG with hardcoded attributes.

MMargarita Chernetski

95% match

Loading thumbnail…

Let'S make a face with D3.js

This example uses D3.js v5 to construct an animated face entirely from SVG primitives. It draws a yellow circle for the head, adds two black eyes and rectangular eyebrows, then creates a mouth using an `arc()` path generator. The eyebrows are animated with a two-second `transition()` that shifts them up and down before returning to their original position. The code relies on D3's `select`, `append`, and attribute methods to build and manipulate the SVG scene.

AArnaud Gbaguidi

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a cartoon face from basic SVG shapes, including a yellow circle for the head, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan

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

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

95% match

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates a simple animated face built entirely with D3.js primitives. It shows a yellow circle head with two eyes, eyebrows, and an arc-shaped mouth, all composed of SVG shapes including circles, rectangles, and a path. A continuous two-second transition repeatedly moves the eyebrows up and down, creating a subtle animation. The code uses D3's `select` to target the SVG root, `append` to build the geometric elements, and the `arc()` generator to construct the mouth’s path, with all rendering in SVG.

Ppoyomon

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple yellow face using D3.js v5 and SVG shapes, with a large circle for the head, two smaller circles for eyes, rectangular eyebrows, and an arc-generated mouth. The eyebrows animate by translating up and down using chained `transition().duration()` calls on a group element. The code uses D3’s `select`, `arc`, and attribute-setting methods to construct the static elements, while the animation relies on D3’s transition system applied to SVG transforms. The data is hardcoded as constants for spacing, offsets, and radii, and the scene is centered within a 960×500 SVG canvas.

Kkh-tm

94% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows how to build a cartoon face using D3.js v5 with SVG shapes and animation. It draws a yellow circular head, two eyes, eyebrows, and a mouth using `select`, `circle`, `rect`, and `path` elements with an `arc` generator. The eyebrows animate up and down via chained `transition().duration(2000)` calls. The code uses static values for positioning and renders entirely in an SVG element, with no external data source.

Mmjoaquim12

94% match