Skip to main content
SimilarExport ZIP
100%

Make a face with D3.js!

✓ Published2🌍 Public
Dduckmammal
Last edited Nov 23, 2020
Created on Nov 20, 2020
Forked from HTML Starter

This example demonstrates how to draw a cartoon face using D3.js with SVG shapes and animation. The face consists of a yellow circle, two black eyes, rotated rectangular eyebrows, and a curved smile path. The code uses D3’s `select`, `arc`, and `transition` APIs to position and animate the eyebrows over time. All shapes are rendered in SVG, and the face is centered using a translation transform.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face with D3.js!

This example demonstrates how to construct a simple cartoon face using SVG primitives created with D3.js v5. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and a path generated by the `arc` function for the mouth. The code leverages D3’s selection and creation API, including `select`, `append`, and attribute setting, while a chained `transition().duration(2000)` animation repeatedly moves the eyebrows up and down. The face is centered within an SVG canvas, with styling provided by an external CSS file.

Iimmanentdomain
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry
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, two eyes, and a mouth drawn with the `arc` function. Eyebrows are animated using chained `transition` calls, moving them down and back over two seconds each. The code arranges all parts within an SVG, using React for scaffolding and numeric attributes for positioning.

DDavid Trye
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes using D3.js, with a yellow circle for the head, two eyes, and an arc-based mouth. The code uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow rising and falling over two seconds. The face is centered by translating a group element, and all shapes are drawn with SVG attributes like `cx`, `cy`, and `r`.

Sshungshung
94% match
Loading thumbnail…

Let's make a face with D3.js!

This interactive example uses D3.js v5 to draw a cartoon face from basic SVG shapes, including a yellow circle, two eyes, eyebrows, and a mouth constructed with an arc path. The code builds the face by appending circle, rect, and path elements inside SVG groups, then animates the eyebrows through a sequence of `transition().duration(2000)` calls that shift their position horizontally and vertically. The rendering relies on D3’s `select`, `append`, and `arc` APIs, with all elements centered via a group transform. The animation cycles through multiple eyebrow movements, demonostrating how D3 transitions can orchestrate timed attribute changes.

Ccathykan
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

Iidwann-eng
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

Iidwann-eng
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, centered within a 960x500 canvas. A yellow circle forms the head, with eyes, eyebrows, and a mouth built from circles, rectangles, and a path generated via `d3.arc`. The animation shows the eyebrows moving down and up using chained `transition` calls with a 600ms duration, creating a subtle expressive blink. The code leverages `d3.select`, `append`, and attribute methods to assemble the scene, targeting React as the framework while rendering directly to SVG.

BBat-Erdene
94% match