Lets make a face with D3.js

100%

Lets make a face with D3.js

✓ Published3🌍 Public

Last edited Jan 16, 2020

Created on Jan 16, 2020

This example creates a cartoon face using D3.js v5, with a purple circular head, two eyes, eyebrows, and a smiling mouth rendered as SVG shapes on an 960×500 canvas. The face is centered using a grouped `<g>` element, and animated eyebrow movements are achieved by chaining `transition().attr()` calls over two-second durations. The code leverages D3’s `select` and `arc` APIs to construct the mouth path, while raw SVG attributes set dimensions and positions. The animation demonstrates D3’s ability to smoothly interpolate SVG transform attributes.

AI-generated description

React Starter code. Hi

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face from basic SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and a path for the mouth. The face is grouped and centered within the SVG canvas. The animation is driven by D3 transitions, which sequentially move the eyebrows downward over two-second intervals. The code uses D3 v5's selection, arc, and transition APIs to construct and animate the elements, with the mouth generated using the `d3.arc` geometry generator to create a curved path.

Ssingularity6033

94% match

Loading thumbnail…

Let's make a face with D3.js

This D3.js example builds a cartoon face entirely out of SVG primitives—circles for eyes and the head, rectangles for eyebrows, and an arc path for the mouth. The face is centered in an SVG canvas using a group transform. The code animates the eyebrows with sequential `transition().duration(2000)` calls, moving them upward and back down. It relies on standard D3 v5 methods like `select`, `append`, and `attr`, using the `arc` helper to generate the mouth’s path data within the SVG.

WWhatTheFork85

93% match

Loading thumbnail…

Let's make a face with D3.js

WWhatTheFork85

93% match

Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree

93% match

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to construct a cartoon face out of basic SVG shapes on a purple background. The code uses `d3.select` and `d3.arc` to draw a yellow circle head, black eyes, rectangular eyebrows, and an arc-shaped mouth. A chained `transition().duration(2000)` animates the eyebrows moving up and down, while a series of `setTimeout` promises toggle the mouth between a smile and an open expression. The face is centered using SVG group transforms.

LLucas Meirelles

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…

Lets make a face with D3.js

A cartoon face is drawn using SVG shapes: a yellow circle forms the head, two circles become eyes, and rectangles serve as eyebrows. The D3.js library is used to select the SVG canvas, position elements with coordinate transformations, and draw the mouth using the `arc` API. The eyebrows animate, moving upward and returning to their original position via chained `transition().duration()` calls. The face is centered within a 960 by 500 pixel SVG viewport, and the code is structured for React using D3 v5.

NNeepaB

93% match

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js v5 to assemble a cartoon face from primitive SVG shapes. A yellow circle forms the head, while black and pink circles, positioned by data-driven coordinates, create the eyes with a scaling animation triggered by chained `transition().delay()` calls. Eyebrows are drawn as rectangles from the same dataset, and an arc path, generated with `d3.arc()`, forms the mouth. The code demonstrates SVG manipulation and animation through D3’s selection and transition APIs, with the entire composition centered and scaled within a 960 by 500 viewport.

NNita

93% match