Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published0🌍 Public
EEzhil-Kalai
Last edited Feb 25, 2023
Created on Feb 25, 2023

This example builds a cartoon face in the browser using D3.js, with a yellow circular head, eyes, eyebrows, and a simple mouth. The code constructs the face by appending SVG shapes—circles, rectangles, and an arc path—to a central group element. An animation is applied to the eyebrows using chained `transition()` calls, causing them to rise and fall over two-second intervals. The visualization uses D3's `select` and `arc` functions, and renders entirely as SVG without any external data source.

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 constructs a cartoon face from basic SVG shapes using D3.js v7, with a yellow circular head, eyes, eyebrows, and an arc-based mouth. It demonstrates D3’s `select`, `arc`, and `append` methods to build the scene, and uses `transition` with `.duration()` to animate the eyebrows moving up and down in a repeating cycle. The face is centered via an SVG `g` transform, with all elements rendered in a 960×500 viewport.

KKaleb LaBarrie
96% 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
96% 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 builds a simple cartoon face using D3.js v6 in a React framework, rendered as SVG with animated elements. It draws a yellow circle for the head, black circles for eyes, and an arc-generated mouth using the `d3.arc()` API. Two rectangular eyebrows are added, with the left one animating upward via a `transition().duration(2000)` call. The code uses `select` and `arc` from D3, positioning elements relative to the SVG’s width and height attributes. The face is composed purely of geometric primitives, with no external data source.

SSeanisgod1994
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 builds a simple cartoon face using D3.js and SVG. It renders a yellow circle as the head, two black circles for eyes, and a mouth created with the `d3.arc` shape generator based on a half-circle arc path. The code references `select`, `attr`, and `arc` from D3 v5, with positions calculated from the SVG’s width and height attributes. The face is constructed entirely in a static SVG, with no data or interaction.

Tthexovc
95% match
Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face using D3.js v5, rendered as an SVG. It draws a yellow circle for the head, blue eyes, eyebrows, and an arc-based mouth using D3’s `arc` generator. The code demonstrates how to manipulate SVG attributes like `cx`, `cy`, `r`, and `width`/`height` to position shapes relative to a central group, using `select` and `append`. No external data is involved; the visualization is entirely constructed from hardcoded dimensions and offsets.

Rrgarimella-viz
95% match