Skip to main content
SimilarExport ZIP
100%

Let's make face with D3

✓ Published2🌍 Public
JJasonXu1244
Last edited Sep 23, 2020
Created on Sep 22, 2020
Forked from SVG

This example draws a simple cartoon face using D3.js v6, rendered as SVG elements with a short animation. It shows a yellow circle as the head, two black circles for eyes, and an arc-based mouth that transitions from a filled semicircle to a hollow crescent shape over two seconds. The code uses D3 selections, the `arc` generator for the mouth path, and a chained `transition().duration()` to animate the shape change. The face is centered within a 960×500 SVG canvas, with hardcoded positions for facial features.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make face with D3

This example draws a simple cartoon face using D3.js v6, rendered as SVG elements with a short animation. It shows a yellow circle as the head, two black circles for eyes, and an arc-based mouth that transitions from a filled semicircle to a hollow crescent shape over two seconds. The code uses D3 selections, the `arc` generator for the mouth path, and a chained `transition().duration()` to animate the shape change. The face is centered within a 960×500 SVG canvas, with hardcoded positions for facial features.

JJasonXu1244
100% match
Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to build a cartoon face using D3.js v6, composed of basic SVG shapes: a yellow circle for the head, two small circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. The page centers the face within an SVG, and a transition animates the right eyebrow moving upward over two seconds. The code imports `select` and `arc` from the D3 library, uses `svg.append` to construct elements, and applies a transition with a 2000-millisecond duration. No external data is involved; it is purely a programmatic SVG rendering exercise.

++/+
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a cartoon face in an SVG canvas using D3.js v5. A yellow circle forms the head, with blue circles for eyes and a black-outlined path for a mouth, created via D3’s `arc` helper. The left eye animates downward over two seconds using the `.transition().duration(2000)` API. The face is centered by translating a group element, and the SVG dimensions are read dynamically from the markup.

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

Let's Make a face with D3.js

The example builds a cartoon face from basic SVG shapes using D3.js v5. It draws a yellow circle for the head, black circles for the eyes, and an arc-based path for the mouth via d3.arc. The right eye uses chained transition.attr calls to animate its vertical position twice, creating a blinking effect. The code imports select and arc directly from the d3 module and renders everything with SVG elements in a fixed 960×500 viewport.

DDhaval Potdar
94% match
Loading thumbnail…

Let's make a face with D3.js

This example shows a simple cartoon face built with D3.js, featuring yellow circular head, black-outlined eyes, animated eyebrows, and a mouth created using the `d3.arc()` shape generator. The SVG elements are positioned using translations and attribute bindings, with the eyebrows transitioning through repeated `transition.attr` calls over two-second intervals. Code imports `select` and `arc` from D3 v7 via UNPKG, and demonstrates local ES6 module usage through an exported `message` constant. The face components are drawn entirely in SVG within a 960×500 viewport, with no external data source.

Yyejichun@naver.com
94% match