Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Ppcbt1125
Last edited Nov 4, 2019
Created on Nov 4, 2019

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face uses SVG primitives—circles, rectangles, and an arc path—to draw a yellow head, eyes, moving eyebrows, and a mouth. The animation repeatedly translates the eyebrow group up and down via chained `transition().duration()` calls, demonstrating DOM manipulation. The code constructs the face from scratch using D3’s `select`, `append`, and `attr` methods, and computes the mouth’s shape with the `arc` helper, all rendered in an SVG canvas.

Ppcbt1125
100% match
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
97% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face is built from SVG shapes, with a yellow circle for the head, two dark eyes, and an arc-based mouth. The eyebrows, rendered as rectangles, animate up and down in a looping transition to give the face a playful expression. The code uses D3 v5 selections and the `arc` generator to construct the mouth path, while `transition.duration` animates the eyebrow group’s transform. All elements are appended to a group centered within an SVG canvas, demonstrating basic DOM manipulation with D3.

LLeonardo Borges Firmino
96% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face demonstrates fundamental DOM manipulation and animation. The code builds an SVG face from primitive shapes—a yellow circle for the head, eyes, a mouth via `d3.arc`, and rectangular eyebrows—centered using a translation. It then animates the brows upward and back over two seconds using chained `.transition().duration(2000)` calls, showing how to select elements, append shapes, and apply sequential transitions. The example uses D3 v5 and renders entirely in the browser as an animated SVG.

Mminimartzz
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face is drawn with SVG shapes, including a yellow circle head, black eyes, and an arc-based mouth. The example demonstrates fundamental D3.js DOM manipulation by selecting the SVG element, appending a group, and building each facial feature with `select`, `append`, and attribute setters. The left eyebrow is a rectangle that animates up and down using chained `transition().duration()` calls with 2000-millisecond delays. The mouth is generated with the `d3.arc` shape generator, using specified inner and outer radii and angular ranges.

PPavelSHE
96% match
Loading thumbnail…

Let's make a face with D3.js!

D3.js draws a yellow smiley face as a scalable SVG, centered in a 960×500 canvas. The face’s circular head, eyes, eyebrows, and arcing mouth are built by appending SVG primitives—`circle`, `rect`, and `path`—to a group. The example demonstrates core DOM manipulation with `d3.select` and `append`, while a chained `transition().duration(2000)` sequence animates the eyebrows, moving them up and down over four seconds. The mouth uses the `d3.arc` shape generator with specified inner and outer radii and angle ranges.

CChetan Hebsur
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation and animation. The code builds the face from primitive shapes—a yellow circle for the head, black circles for the eyes, a path for the mouth—and positions them via group transforms. Two animated eyebrows, implemented as rectangles, shift vertically using chained `transition() .duration(2000)` calls. The example reads SVG dimensions with `parseFloat`, uses helper methods like `select`, `append`, and `attr`, and draws the mouth with the `arc()` shape generator from D3's shape module.

Sssd4
96% match