Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
ZZhi Guangda
Last edited Jul 24, 2019
Created on Jul 24, 2019

A smiling cartoon face is drawn with SVG shapes, including a yellow circle head, white eyes with black pupils, rectangular eyebrows, and a curved mouth. The face animates through D3.js transitions: the eyes and pupils scale up and down, the eyebrows shift vertically, and the mouth rotates and scales. Using D3 v5, the code builds elements with `select`, `append`, and `attr`, while a series of chained `.transition().duration()` calls create the sequential motion.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is drawn with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a curved path for a mouth. The face is centered on an SVG canvas, and animated eyebrows and mouth move through a sequence of positions using D3 transitions with a two-second duration. The code explicitly uses D3's `select`, `append`, `attr`, and `transition` methods to manipulate DOM elements, building the face from primitive shapes.

CChristina-Young
95% match
Loading thumbnail…

Let's make a face with D3.js!

This D3.js example builds a smiling cartoon face from scratch using SVG primitives. A yellow circle forms the head, while two circles with animated rectangular eyebrows and an arc-shaped mouth are positioned to create the expression. The right eyebrow repeatedly moves up and down via chained `transition().duration(2000)` calls, demonstrating D3's animation capabilities. All elements are scaled and centered using the `select` and `append` API from d3 v5.

NNick Dyson
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
95% match
Loading thumbnail…

Let's make a face with D3.js

A smiling yellow face is drawn in an SVG canvas using D3.js, with eyes, eyebrows, and a mouth positioned relative to a centered group. Eyebrows animate upward and back down via chained `transition().duration()` calls, moving the group's transform attribute. The code uses `d3.select`, `d3.arc` for the mouth's shape, and explicit SVG `circle`, `rect`, and `path` elements. The face is styled with a light blue background and black strokes, all rendered dynamically from the viewport height and width.

GGabe Nascimento
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in yellow dominates the SVG canvas, with eyes, eyebrows, and a curved mouth built from basic D3 shapes. The animation shows the eyebrows shifting upward over two seconds and then returning, using chained `transition().duration()` calls. The code constructs the face with `select`, `append`, and `arc` from D3 v5, positioning elements via `attr('transform')` with string translation. The path for the mouth is generated by the arc helper, and all drawing occurs through SVG element creation.

Nnicfavfar
95% match
Loading thumbnail…

Lets Make a Face with D3.js

A smiling face composed of SVG shapes is drawn and then animated with D3.js. The face uses yellow circles for the head and eyes, and rectangular eyebrows that shift upward in sequence before returning. The mouth is an arc that transforms from an open smile into a closed line. The code accesses the SVG element with `d3.select` and uses `transition` with `duration` and `delay` to choreograph the animations.

LLo-ov
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face composed of SVG shapes animates on a yellow circular head, with eyebrows that raise and lower repeatedly. The example demonstrates D3.js v5 selections and transitions, using `append`, `attr`, and chained `transition().duration()` calls to animate rectangles. It builds the face with primitive shapes: a circle for the head, ellipses for eyes, a path generated by the `d3.arc` function for the mouth, and animated rects for eyebrows.

Hhritiksingh580
95% match