Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
Wwindsoftheo
Last edited Dec 28, 2020
Created on Dec 18, 2020

This example builds a cartoon face from scratch in an SVG canvas, with a yellow circular head, framed by black outlines, two eyes, and an open arc-shaped mouth. The face is centered via a translated group element, and its features are composed of basic geometric shapes: circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. The visualization is animated using D3 transitions—the right eye shrinks and regrows over a two-second duration, while the entire eyebrow group shifts vertically and returns, creating a subtle winking and raising expression.

AI-generated description
MIT Licensed

Similar vizzes

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

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face as a yellow circle with eyes, eyebrows, and a mouth, all rendered in SVG. The eyes and eyebrows are positioned using D3 selections and attributes, while the mouth is drawn with the `d3.arc` shape generator. The eyebrows animate upward and back down over two 2-second transitions, demonstrating `transition.attr`. The face is centered via a translation and styled with CSS on the `body`.

Ffra-alaimo
95% match
Loading thumbnail…

Let's make a face with D3.js!

Using D3.js v5, this example builds a simple cartoon face from SVG shapes: a yellow circle head, two dark eyes, rectangular eyebrows, and an arc-based smile. The code employs D3 selections to append elements and `d3.arc` to generate the mouth path. Animated eyebrows move via chained `transition().duration()` calls, shifting vertically and returning, creating a blinking-like effect. The rendering uses SVG with a centered group transform, and all visual components are defined programmatically with fixed numeric constants for spacing and size.

Nnkohdatavis
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

Aash301
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
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a cartoon face from SVG primitives. A large yellow circle forms the head, with two black circles for eyes placed at fixed offsets and a yellow arc path generated via the `arc()` function for the mouth. Rectangular eyebrows are animated with chained `.transition()` calls, moving downward and back over two seconds each. The SVG canvas is set to 960 by 500 pixels with a red background, and all shapes are positioned relative to the center using D3's selection and attribute methods.

Sstelson
95% match