Skip to main content
SimilarExport ZIP
100%

(HW) Let's make a face with D3.js!

✓ Published0🌍 Public
YYF
Last edited Nov 8, 2018
Created on Aug 29, 2018

An animated yellow face with a black outline reacts with embarrassment as its eyes shrink, eyebrows dart upward, and rosy cheek circles appear. The mouth narrows from a wide rectangle to a thin line, reflecting a bashful expression. This D3.js v5 example demonstrates fundamental SVG manipulation and chained transitions, using `d3.select` to target elements and `transition().duration()` to sequence animations of circles, rectangles, and groups. The face is centered via SVG transforms, with data-driven attributes set imperatively.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a embarrassed face whose eyes, eyebrows, and mouth are animated.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with d3.js!

A yellow face built with SVG circles, rectangles, and arcs animates its expressions. The face’s eyebrows shift downward and upward via chained `transition().duration()` calls, while a smile arc flips into a frown using the same timed transforms. The code constructs the face by appending SVG groups and shapes with d3 v5’s `select` and `arc` APIs, positioning elements relative to the center of a 960×500 SVG. Static facial features—eyes, irises, and a mouth—are drawn with basic geometry, while the background turns red through a direct DOM style update.

Ccacho2294
91% match
Loading thumbnail…

Let's make a face with D3.js!

Built with D3.js v5, this animated SVG draws a yellow smiley face with circular eyes, a curved mouth, and rectangular eyebrows. The eyebrows continuously move up and down using chained `transition()` calls with `attr` updates, demonstrating fundamental DOM manipulation through selections like `select` and `append`. The code constructs the face using SVG primitives—circles, rects, and a path generated by the `arc()` generator—within a group translated to the canvas center. The example showcases D3 transitions and shape generation without requiring any external data.

AArthur Welf
90% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black-outlined features forms a smiling face. The D3.js code builds the face using SVG primitives: a circle for the head, two circles for eyes, and arcs from `d3.arc()` for eyebrows and a mouth. An animation sequence uses chained `transition()` calls with 1000-millisecond durations to repeatedly raise and lower the eyebrows, creating a winking or surprised expression. The example demonstrates basic SVG drawing and simple timeline-based animation in D3 v5.

Dddperdue
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a curved mouth is drawn in SVG using D3.js v6. The face’s eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls on an SVG group’s `transform` attribute. The mouth is created with the `d3.arc()` helper, while circles and rectangles compose the eyes and brows, all centered within an SVG canvas using a translated group.

Iihatelearning
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiling face. A yellow circle forms the head, with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth. The animation uses D3’s `transition` method to repeatedly move the entire eyebrow group up and down over two-second intervals, creating a blinking effect. The SVG scene is centered using the `attr` transform, and all shapes are appended to the SVG canvas with hardcoded dimensions and positions.

Ddktaylor916
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiling face. A yellow circle forms the head, with black-outlined eyes, rectangular eyebrows, and an arc-shaped mouth. The animation uses D3’s `transition` method to repeatedly move the entire eyebrow group up and down over two-second intervals, creating a blinking effect. The SVG scene is centered using the `attr` transform, and all shapes are appended to the SVG canvas with hardcoded dimensions and positions.

Ddktaylor916
90% match
Loading thumbnail…

Let's make a face with D3.js!

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.

ZZhi Guangda
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG shapes, then animating its eyebrows and mouth. The code uses d3-selection to append and configure circles, rectangles, and an arc-based path for the face components. A chained `transition().duration(2000)` moves the eyebrow group vertically and shifts the mouth, creating a subtle facial expression change. The visualization runs entirely in the browser using D3 v5 and renders via SVG, with all geometry defined through static attributes rather than data binding.

Mmirna981
90% match