Lets make a Face with d3.js

100%

Lets make a Face with d3.js

✓ Published2🌍 Public

Last edited Dec 3, 2021

Created on Dec 2, 2021

Forked from Fork of Let's Make a Face Part I

This example uses D3.js to draw a simple cartoon face in SVG, centered within a 960×500 viewport. The face consists of a yellow circle with a black stroke, two eyes, animated eyebrows, and a mouth arc created with d3.arc. The eyebrows and mouth use chained transitions to repeatedly move and change fill color, creating a looping animation. All shapes are appended to a group translated to the canvas center, with fixed pixel offsets for eye spacing and eyebrow dimensions.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

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

94% match

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…

Let's make a face with D3.js

This visualization constructs a cartoon face from basic SVG shapes using D3.js v6, including a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc-generated mouth. The eyebrows animate up and down repeatedly through chained `transition.duration` calls, moving their vertical position by 50 pixels and back. The face is centered in a 960x500 SVG canvas, with all elements grouped and positioned via transform attributes and hardcoded constants for spacing and dimensions.

AAdam Usmani

93% match

Loading thumbnail…

Lets make a face

This example uses D3.js (v5) to draw a stylized cartoon face on an SVG canvas, featuring a yellow circular head, black eyes, and a curved mouth created with d3.arc. The code positions facial features using group transformations, centering the face within a 960×500 viewport. A transition animation moves the eyebrows upward and back downward over two seconds, demonstrating d3’s `transition` method with duration chaining. The rendering relies on SVG elements and D3 selections, with no external data source.

DDaniel Weston

93% match

Loading thumbnail…

Lets make a face with d3.js

This example uses D3.js (v5) to construct a simple cartoon face directly in an SVG canvas. The code draws a yellow circle for the head, two black circles for eyes, and a path for the mouth, with the mouth generated using D3’s arc generator with specified inner and outer radii and angle ranges. All shapes are positioned relative to the SVG’s width and height, and the styles are defined in a separate CSS file. The example demonstrates basic SVG shape creation and attribute manipulation with D3’s selection and append methods.

Ddktaylor916

93% match

Loading thumbnail…

Let's make a face with D3.js

This example draws a yellow cartoon face in SVG, centered within a 960x500 viewport, using D3’s `select` and `arc` functions. The face features black circular eyes, rectangular eyebrows, and a mouth generated from an arc path. An animation demonstrates D3's `transition` method, which moves the eyebrows upward and back down over two two-second intervals. All shapes are built with D3 selections, and the SVG elements are positioned via translation and attribute assignments.

MMauradion

93% match

Loading thumbnail…

Lets make a face with D3.js

A yellow circle becomes a cartoon face with eyes and eyebrows, plus an arc-shaped mouth, all built as SVG elements centered in a 960x500 canvas. The code uses D3 v6 selections to append a group translated to the center, then adds circles and rectangles for features. The eyebrows animate upward and back using chained `transition().duration(2000)` calls on the group's transform attribute. D3's `arc()` path generator creates the mouth with specified inner and outer radii and angular extents.

Ttarunjada

93% match