A FACE WITH D3.JS

100%

A FACE WITH D3.JS

✓ Published0🌍 Public

Last edited Apr 24, 2020

Created on Apr 24, 2020

Forked from Untitled

This example draws a cartoon face using D3.js v5, rendered as an SVG with a yellow circular head, eyes, eyebrows, and a mouth created using the `d3.arc` path generator. The page also includes an animated left eyebrow that moves down and back up via chained `transition().duration(2000)` calls, while the right eyebrow remains static. All shapes are positioned with explicit pixel coordinates within a 960x500 SVG canvas.

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

93% 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

93% match

Loading thumbnail…

Lets make a face with D3.js

This example draws a simple cartoon face with a yellow circular head, two eyes, animated eyebrows, and a curved mouth. The face is centered in an SVG canvas, and the eyebrows move up and down repeatedly using chained `transition` calls. The code uses D3 v5 selections to build the shapes, including `arc()` for the mouth path, and relies on SVG primitives like `circle` and `rect` for rendering.

Jjblaskovich

93% 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

92% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows how to build a cartoon face using D3.js v5 with SVG shapes and animation. It draws a yellow circular head, two eyes, eyebrows, and a mouth using `select`, `circle`, `rect`, and `path` elements with an `arc` generator. The eyebrows animate up and down via chained `transition().duration(2000)` calls. The code uses static values for positioning and renders entirely in an SVG element, with no external data source.

Mmjoaquim12

92% 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, black circles for eyes, and an arc-based path for the mouth. The animation shows the eyebrows moving up and down repeatedly through chained `transition()` calls, each lasting 2000 milliseconds. The code uses D3's `select` and `arc` APIs, with coordinates centered via an SVG group transformation. The face is built programmatically in JavaScript, positioning shapes relative to the center of a 960 by 500 viewport.

Mmuxiaofan

92% match

Loading thumbnail…

D3 Face

A cartoon face rendered in SVG uses D3 v5 to build a yellow circle head with black eyes and an arc-based mouth. Eyebrows, drawn as rectangles, animate vertically through chained `transition` calls on a group element. The code leverages D3’s `select` and `arc` APIs, with static attributes for positioning and a repeated eyebrow movement lasting two seconds per phase, demonstrating basic SVG construction and timed animation.

Ttenghaoman

92% match

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to draw a simple cartoon face with SVG shapes. A yellow circle forms the head, with two smaller circles for eyes and rectangles for eyebrows, all positioned relative to the center of the SVG canvas. A mouth is created using the `d3.arc` helper to generate a curved path. The eyebrows animate with `transition.duration`, moving down and back up over two seconds, demonstrating basic SVG rendering and animation capabilities in D3 v5.

TTikiWayne

92% match