Skip to main content
SimilarExport ZIP
100%

Let's Make a Face with D3,js!

✓ Published3🌍 Public
Sslipperyd
Last edited Feb 8, 2020
Created on Feb 4, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

Let's Make a Face with D3.js

This example builds a stylized face from basic SVG shapes—a yellow circle for the head, two eyes, animated eyebrows, and an arc-based mouth—centered within an SVG canvas. The code uses D3.js v5 selections and the `arc` generator to construct the mouth path, while `transition()` animates the eyebrows in a looping up-and-down motion. React serves as the hosting framework, and rendering relies on SVG elements with D3’s declarative attribute chaining.

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

Let's make a face with D3.js!

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.

SSimon Pettersson
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: a yellow circle for the head, black circles for eyes, and a mouth drawn with the `d3.arc` path generator. The eyebrows are rectangles that animate their vertical position using chained `transition` calls with `attr` tweens, giving the face a blinking or winking effect over time. The code selects the SVG element and appends shapes with explicit `attr` settings for coordinates, sizes, and fill colors, while the `<script>` tag loads D3 from a CDN. The rendering approach is purely declarative SVG construction with animated transitions.

Ookleinlux
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 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
95% 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
95% match