Make a face w/ D3.js

100%

Make a face w/ D3.js

✓ Published3🌍 Public

Last edited Mar 18, 2020

Created on Mar 18, 2020

This example uses D3.js to draw a cartoon face from SVG primitives, including a yellow circular head, eyes, eyebrows, and an arc-based mouth. The brows are animated using D3's transition system, moving downward over 2.5 seconds and then returning. The code constructs the shape by translating a central group, positioning features with relative offsets, and applies rotations to the rectangular eyebrows. The mouth is generated with D3's arc generator, which defines a path using inner and outer radii and angular ranges. Rendering is purely in SVG, with no external data, relying on hardcoded geometry.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to draw a simple cartoon face as an SVG, comprising a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth. The face is centered within a 960×500 viewport using an SVG group transform. The eyebrows animate upward and back down over two seconds each way using chained `transition().duration()` calls. The mouth is generated with D3’s `arc()` geometry, while static shapes are created via `select`, `append`, and attribute setters.

DD2552

94% match

Loading thumbnail…

Lets make a face with D3.js

This example draws a simple cartoon face with a yellow circular head, two eyes, animated eyebrows, and a curved mouth. The face is centered in an SVG canvas, and the eyebrows move up and down repeatedly using chained `transition` calls. The code uses D3 v5 selections to build the shapes, including `arc()` for the mouth path, and relies on SVG primitives like `circle` and `rect` for rendering.

Jjblaskovich

93% match

Loading thumbnail…

make a face with d3.js

Using d3.js v5 and SVG, this example renders a cartoon face from primitive shapes: a yellow circle head, two eyes, eyebrows, and a mouth arc. The face is centered and symmetrically positioned using coordinate transforms. The eyebrows animate vertically through chained `transition` calls with a 2000ms duration, moving up by 50 pixels and then returning to their original position. The code constructs the SVG programmatically via `select` and `append`, and uses the `arc` function to generate the mouth's path data from inner and outer radii and angular ranges.

ZZhipeng Xu

93% match

Loading thumbnail…

Make a face with D3.js

This example assembles a cartoon face from basic SVG shapes, depicting a yellow head with eyes, eyebrows, and a mouth. The eyebrows animate in a looping motion, moving down and back up. Built with D3.js v6, the code uses `select`, `append`, and `attr` to construct the visual elements, while the `transition().duration()` API drives the continuous eyebrow animation. The mouth is drawn using the `arc()` generator to create a curved path.

YYanda Qu

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from scratch in an SVG canvas, with a yellow circular head, framed by black outlines, two eyes, and an open arc-shaped mouth. The face is centered via a translated group element, and its features are composed of basic geometric shapes: circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. The visualization is animated using D3 transitions—the right eye shrinks and regrows over a two-second duration, while the entire eyebrow group shifts vertically and returns, creating a subtle winking and raising expression.

Wwindsoftheo

93% match

Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face from SVG shapes using D3.js v6, with yellow circular head, eyes, eyebrows, and a mouth drawn using the `d3.arc` path generator. The code animates the eyes by transitioning their radius attribute and shifts the eyebrow group’s transform property through sequential `transition.duration` calls. All elements are centered within an SVG via a translated group, and the face is constructed entirely from static shape attributes rather than data binding or external data sources.

AAndrewRiceMGW

93% match

Loading thumbnail…

Let's make a face with D3.js!

A cartoon face is drawn from SVG shapes, with a yellow circular head, two eyes, and eyebrows. The eyebrows are animated with a continuous bouncing motion, moving down and up over two seconds each way. The mouth is created as a path using an arc with specified inner and outer radii. This example uses D3.js v6 methods such as `select`, `append`, `attr`, `transition`, and the `arc` generator to build and animate the SVG scene.

SShuyu Zheng

93% match

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to draw a simple cartoon face with SVG shapes. A yellow circle forms the head, with two smaller circles for eyes and rectangles for eyebrows, all positioned relative to the center of the SVG canvas. A mouth is created using the `d3.arc` helper to generate a curved path. The eyebrows animate with `transition.duration`, moving down and back up over two seconds, demonstrating basic SVG rendering and animation capabilities in D3 v5.

TTikiWayne

93% match