Skip to main content
SimilarExport ZIP
100%

Lets make a face

✓ Published1🌍 Public
DDaniel Weston
Last edited Jul 12, 2019
Created on Jul 11, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

Lets make a face with D3.js

This example uses D3.js v5 to assemble a cartoon face from primitive SVG shapes. A yellow circle forms the head, while black and pink circles, positioned by data-driven coordinates, create the eyes with a scaling animation triggered by chained `transition().delay()` calls. Eyebrows are drawn as rectangles from the same dataset, and an arc path, generated with `d3.arc()`, forms the mouth. The code demonstrates SVG manipulation and animation through D3’s selection and transition APIs, with the entire composition centered and scaled within a 960 by 500 viewport.

NNita
94% 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

This example draws a simple face in D3, rendered with SVG and animation. A yellow circle forms the head, with rectangular eyes, a nose, and a curved mouth. The eyebrows animate by moving up and down repeatedly using chained `transition` calls. The code uses D3’s `select`, `arc`, and `transition` APIs within a static SVG canvas.

LLM2020
93% match
Loading thumbnail…

Lets make a face

This example draws a simple face in D3, rendered with SVG and animation. A yellow circle forms the head, with rectangular eyes, a nose, and a curved mouth. The eyebrows animate by moving up and down repeatedly using chained `transition` calls. The code uses D3’s `select`, `arc`, and `transition` APIs within a static SVG canvas.

LLM2020
93% match