Skip to main content
SimilarExport ZIP
100%

Lets Make a Face with D3.js!

✓ Published0🌍 Public
JJMason88
Last edited Jun 4, 2019
Created on Jun 4, 2019

A cheerful cartoon face rendered in SVG uses D3.js v5 to draw a yellow circle as the head, with circles for eyes and an arc-generated mouth. The example demonstrates D3's `arc()` generator and SVG shape creation. Eyebrows animate up and down through chained `transition().duration(2000)` calls, showing how D3 timers and attribute interpolation work. The code selects an existing SVG element, applies transforms to group elements, and centers the face via width and height calculations. This interactive-looking yet purely animated composition highlights basic D3 selections, scales, and SVG coordinate systems.

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

A cheerful cartoon face is rendered as an SVG scene, built entirely from basic shapes including circles, rectangles, and an arc. The code constructs a yellow face with two eyes and rectangular eyebrows that animate by moving downward and back upward using chained D3 transitions. A mouth is drawn using the `d3.arc` shape generator. The example demonstrates SVG manipulation and animation with the D3.js v5 library, styling the background gray and centering the face within a 960 by 500 viewport.

Jjhpp114
95% match
Loading thumbnail…

Lets make a face with D3

A cheerful cartoon face rendered in SVG uses D3 v5 selections to build a yellow circle head, two eyes, and an arc-shaped mouth. The eyebrows animate upward and back down via chained `transition().duration()` calls, creating a surprised expression. Code imports `select` and `arc` from the D3 module, positioning elements with a centered `g` group and SVG attributes. The example demonstrates basic D3 data-joining-free shape construction and timed transitions.

Mmandelmech
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…

Lets make a face with D3.js!

A cheerful cartoon face is rendered as SVG using D3.js, composed of layered geometric shapes: a yellow circle head with black-outlined stroke, eyes, irises, cheeks, a nose line, and two mouth arcs built with d3.arc. The code uses d3.select to manipulate the SVG canvas and attributes like `attr` for positioning and styling. All facial features are positioned relative to the viewport dimensions (960x500). The mouth paths are generated via the `arc` function with specified inner and outer radii and angular ranges, demonstrating D3's utility for constructing complex shapes from simple primitives.

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

Let's make a Face with D3!

A cheerful cartoon face is drawn and animated using SVG elements, with a yellow circle head, dark stroke outlines, eyes, and an arc-based mouth. The example demonstrates D3 v5’s `select`, `arc`, and chained `transition` APIs to animate expressive eyebrows that move up and down over timed intervals. The code constructs the face by appending circles, lines, and a path to a centered group, using explicit pixel coordinates and stroke widths. The visualization showcases basic SVG rendering and procedural animation in a simple, playful composition.

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

Let's make a face witb D3.js!

Built with D3 v5, this animation shows a cheerful yellow face constructed entirely from SVG shapes, including circular eyes, rectangular eyebrows, and a smile drawn using the `arc` function. The face is centered within an SVG canvas, and the eyebrows perform a looping vertical movement through chained `transition().duration()` calls. This example demonstrates fundamental D3 shape generation and animation techniques using selections, attribute manipulation, and the `arc` generator to create the mouth path.

Ssslee8778960
94% match