Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published4🌍 Public
SSimon Pettersson
Last edited Apr 14, 2020
Created on Apr 8, 2020
Forked from HTML Starter

This example demonstrates how to construct a simple animated face using D3.js, with a yellow circular head, eyes, eyebrows, and a mouth drawn using `d3.arc`. The code renders the face as SVG elements within a React framework, using `select` and `arc` from D3 to build the shapes. A `transition` animates the eyebrows upward and back down repeatedly, creating a blinking or surprised expression. The face is centered within a 960x500 SVG canvas, with all geometry derived from hardcoded dimensions rather than external data.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face with D3,js!

This example uses D3.js version 5 to build an animated face from basic SVG shapes. A yellow circle forms the head, with two smaller circles for eyes, and a custom arc path renders the mouth. The eyebrows, drawn as rectangles, perform a repeated vertical transition to simulate a winking or expressive motion. The code leverages D3’s `select`, `arc`, and chained `transition().duration()` methods, while React and a bundled `bundle.js` handle the application structure. All coordinates and sizes are derived from the SVG’s width and height attributes.

Sslipperyd
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build an animated face from basic SVG shapes within a React framework. The code draws a yellow circle as the face, adds two eyes with matching eyebrows, and constructs a mouth using the D3 `arc` path generator with specific inner and outer radii. Eyebrows animate via chained `transition()` calls, moving upward and back down over a two-second duration. The SVG canvas is 960×500 pixels, with all elements positioned relative to a centered group using translation transforms.

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

Let's make a face with d3.js!

This example uses D3.js to draw an animated face from basic SVG shapes. A yellow circle forms the head, with black circles for eyes and rectangular eyebrows that transition vertically over time. The mouth is built from arc paths generated with D3’s `arc` function. All elements are grouped and translated to the center of the 960x500 SVG canvas, and the code runs within a React starter template.

BBhavyatulasi
95% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js (v6) with React to draw an animated face in SVG. A yellow circle forms the head, with two eyes and a mouth created using the `arc` shape generator. Eyebrows are rectangles that animate vertically using chained `.transition()` calls with varying durations, creating a bobbing motion. The code demonstrates SVG attribute manipulation, transitions, and geometric construction within a 960×500 canvas.

Kkrasser650
95% match
Loading thumbnail…

Let's make a face with D3 and SVG

This example demonstrates how to build an animated cartoon face using D3 and SVG, with a yellow circle for the head, black-outlined eyes, and an arc-based mouth centered on a 960x500 canvas. The eyebrows are rectangles that bounce up and down using chained `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5 and uses React for the framework. SVG elements are constructed programmatically, with the mouth path generated via the `arc()` API using inner and outer radii and angular ranges.

Pp4pravin
95% match
Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face from basic SVG shapes, including a yellow circular head, eyes, eyebrows, and a mouth formed using D3’s `arc` function. The animation sequentially slides the eyebrows downward and back upward via chained `transition().duration(2000)` calls on the SVG group’s `transform` attribute. The code uses D3 v5 selection and appending methods to construct and manipulate the 960×500 canvas, with React–based rendering handled outside the visible snippet.

Ccrisis-davis
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, 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
95% match