Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published4🌍 Public
BBKirst3
Last edited Feb 6, 2021
Created on Feb 6, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

RRamziCharradi
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, and its eyebrows animate upward and downward in a loop. The face is constructed using D3.js v5’s `select` and `append` to create circles for eyes, rectangles for eyebrows, and a `path` for the mouth via the `arc` shape generator. The eyebrows’ movement is driven by chained `transition().duration()` calls that alter the group’s `transform` attribute. The code relies on D3’s DOM manipulation and transition APIs, with all rendering occurring in an SVG viewport.

JJuan Carlos
96% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face rendered in SVG is drawn with D3.js, using geometric shapes for the head, eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The example demonstrates a looping animation where the eyebrows repeatedly move downward and back upward via chained `transition.attrTween` calls, while the static face elements remain fixed. The code relies on D3 selections and attribute manipulation, with the SVG canvas set to 960 by 500 pixels and centered via a transformed group.

Ffedericojv
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, with its eyebrows animating up and down in a repeating loop. The example demonstrates fundamental DOM manipulation in D3.js v5, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` API, and the eyebrow motion relies on chained `transition().duration()` calls to alternate the transform attribute, creating a simple, continuous facial animation.

PParminder Singh
95% 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
95% 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
95% 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
95% 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
95% match