Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Nov 29, 2019

Created on Nov 29, 2019

Forked from Let's make a face with D3.js!

A smiling cartoon face is drawn and animated using SVG primitives, with two eyes, eyebrows, and a mouth constructed from circles, rectangles, and a D3 arc path. The eyebrows repeatedly rise and fall via chained `transition().duration()` calls triggered by `setInterval`. Built with D3 v5, the code uses `select` for DOM access and the `arc` generator to shape the mouth, with all elements centered on an SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with D3.js, rendered as SVG shapes. The face uses circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. The eyebrows animate by moving downward and back upward over six seconds using chained `transition` calls with a 3000-millisecond duration. The code constructs the face using `d3.select`, `d3.arc`, and `d3.transition` APIs on the SVG canvas.

BBKirst3

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from basic SVG shapes in D3 v5 demonstrates modular JavaScript composition. The code constructs circles, rectangles, and an arc-generated mouth using `d3.arc`, then positions them relative to a central group. Eyebrows animate downward and back via chained `transition().duration()` calls, simulating a blink-like motion. The face uses fixed dimensions from the SVG viewport, with all elements drawn programmatically from math constants rather than external data.

HHadi Boukdir

94% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG primitives demonstrates basic D3.js DOM manipulation. Circles form the head, eyes, and mouth, while rectangles serve as eyebrows. The eyebrows animate via chained `transition().duration(2000)` calls, moving down and up over four seconds. The mouth is drawn using the D3 `arc` shape generator, and the entire composition is placed inside a red-background SVG canvas.

PPranita Khandelwal

94% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face composed of SVG shapes appears centered in the viewport. Its rectangular eyebrows animate upward and back down in a looping motion, while a curved mouth path follows the same transformation. The code uses D3.js v5 functions like `select`, `arc`, and chained `transition` calls to move elements. The example demonstrates fundamental DOM manipulation with SVG primitives, including circles for the head and eyes, rectangles for brows, and a path built from an arc generator.

LLaurentVuillon

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

94% match

Loading thumbnail…

Let's make a face with D3.js

WWhatTheFork85

94% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates through D3.js v5, using circles for the eyes and face, rectangles for eyebrows, and a path with the d3.arc generator for the mouth. The code demonstrates SVG element construction, attribute binding, and a chained transition that moves the eyebrows up and down over two seconds. A decorative bindhi path and sparkle circle add detail, with all elements grouped and translated relative to the SVG canvas center.

EEllen Cubbin

94% match

Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face out of basic SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas using D3.js v5. The code imports `select` and `arc` from the D3 library to append elements and compute the mouth’s path. A chained `transition().duration(2000)` sequence animates the eyebrows up and down, creating a winking expression. The layout uses fixed numeric constants for spacing and offsets, with no external data source.

Rracoo

94% match