Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Ccindy203cc
Last edited Sep 26, 2022
Created on Sep 18, 2022

This example builds a simple cartoon face from SVG shapes using D3.js v5, including circles for the eyes, rectangles for eyebrows, and a path generated with d3.arc for the mouth. The face is centered on a yellow circle, and the eyebrows animate vertically using chained transition.attr calls with a two-second duration each. The code selects the SVG element directly and applies transforms to group elements, demonstrating basic shape creation, layout, and animation in a declarative D3 workflow.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of simple SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path for the mouth. The code uses D3.js v5’s `select` and `arc` functions, with the mouth generated via an arc generator based on specified inner and outer radii and angles. The eyebrow group animates up and down using chained `transition()` calls with a two-second duration, moving the transform attribute. All elements are centered within a yellow, black-stroked head on a 960×500 SVG canvas.

Rruubi0807@gmail.com
95% match
Loading thumbnail…

Let's make a face with D3.js!

Using D3.js v5, this example builds a simple cartoon face from SVG shapes: a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based smile. The code employs D3 selections to append elements and `d3.arc` to generate the mouth path. Animated eyebrows move via chained `transition().duration()` calls, shifting vertically and returning, creating a blinking-like effect. The rendering uses SVG with a centered group transform, and all visual components are defined programmatically with fixed numeric constants for spacing and size.

Nnkohdatavis
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face using D3.js v5, rendered as SVG elements with animated eyebrows. It draws a yellow circle for the head, two blue eyes, and a mouth created with the `d3.arc()` path generator. The eyebrows, made of rectangles, move up and down through chained `transition().duration()` calls over two seconds each. The code uses `d3.select` to attach elements to an SVG container and positions them via transform attributes, demonstrating basic geometric shape composition and simple animation in D3.

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

Let's make a face with D3.js!

This example demonstrates how to build a simple cartoon face using basic SVG shapes and D3.js v5. The code creates a yellow circle for the face, two circles for eyes, rectangles for eyebrows, and a semi-circular arc for the mouth, all positioned within a centered group. It uses D3’s `select` to manipulate the SVG, the `arc` generator from the `d3-shape` module to define the mouth path, and inline attribute chaining to set coordinates and styling. The face is assembled procedurally with hardcoded offsets and dimensions, illustrating fundamental SVG construction with D3.

Sshallowater
94% match
Loading thumbnail…

Let's make a Face with D3!

This example demonstrates how to build a simple, smiling cartoon face using D3.js version 5. The face is composed of SVG shapes—a yellow circle for the head, two black circles for eyes, animated line eyebrows, and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the path, with `transition().duration()` to animate the eyebrows up and down. The SVG is centered and scaled based on the viewport width and height, with all shapes positioned relative to a central group.

Wwinner106
94% match
Loading thumbnail…

Let's make a Face with D3!

This example demonstrates how to build a simple, smiling cartoon face using D3.js version 5. The face is composed of SVG shapes—a yellow circle for the head, two black circles for eyes, animated line eyebrows, and an arc-based mouth. The code uses `d3.select` and `d3.arc` to construct the path, with `transition().duration()` to animate the eyebrows up and down. The SVG is centered and scaled based on the viewport width and height, with all shapes positioned relative to a central group.

Wwinner106
94% match