Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published0🌍 Public
AAkshada Pradhan
Last edited May 13, 2020
Created on May 13, 2020

A smiling face made of SVG shapes is drawn with D3.js, using circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows animate vertically via chained `transition().duration()` calls, shifting down and back up over two seconds each. The code imports `select` and `arc` from d3, manipulates SVG attributes directly, and positions elements relative to a centered group. Rendering uses an SVG canvas with a yellow circle and black strokes.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A face is drawn as a smiley with yellow fill, black stroke, circular eyes, and an arc-shaped mouth on an SVG canvas. The code demonstrates fundamental D3.js DOM manipulation by appending shapes to a group element, using `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows, which move up and down over two-second intervals. The rendering is entirely SVG with a simple animation loop.

VVipul Gaurav
95% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face drawn with SVG elements animates its eyebrows and mouth via D3 transitions. The example builds the face from primitive shapes—a yellow circle for the head, circles for eyes, rectangles for brows, and an arc path for the mouth—all positioned within a centered group. Using d3.select and d3.arc, it applies chained transition.attr methods over three-second durations to shift the brows upward and slide the mouth sideways, while static hair paths use CSS stroke styling.

Ssgzzhinde
95% match
Loading thumbnail…

Let's make a face with D3.js

A smiling face drawn with SVG elements animates its eyebrows and mouth via D3 transitions. The example builds the face from primitive shapes—a yellow circle for the head, circles for eyes, rectangles for brows, and an arc path for the mouth—all positioned within a centered group. Using d3.select and d3.arc, it applies chained transition.attr methods over three-second durations to shift the brows upward and slide the mouth sideways, while static hair paths use CSS stroke styling.

Ssgzzhinde
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn entirely with SVG shapes—a yellow circle for the head, two dark circles for eyes, a dark arc for the mouth, and two animated eyebrow rectangles. The example demonstrates basic D3.js shape generation and animation, using `d3.arc` to create the mouth path and chained `transition` calls to move the eyebrows up and down over repeated two-second cycles. It also shows how to position groups with `translate` transforms and select elements with D3's selection API.

KKaleb LaBarrie
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js selection methods to append and position circles, rectangles, and an arc-based mouth. The eyes and eyebrows are grouped and translated, with D3 transitions animating the eyebrow group upward and back over two seconds. The animation repeats once, moving the eyebrows through a vertical range to create a surprised expression. D3's `select`, `arc`, and chained `transition` and `attr` methods drive the DOM manipulation, while the page loads D3 v5 from a CDN.

AArcy Flores
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes demonstrates fundamental D3.js DOM manipulation. The code selects an SVG element and appends yellow circles for the head and eyes, black rectangles for eyebrows, and an arc-based path for the mouth. Using `d3.transition` with a two-second duration, the eyebrows animate upward and then back down, creating an expressive movement. The example uses D3 v5's `select`, `append`, and `attr` methods to build and update elements, with the mouth drawn via `d3.arc`.

KKhalid
95% match
Loading thumbnail…

Lets make a face with D3.js

A smiling face is drawn with D3.js (v6) using SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate upward and downward via chained `transition` calls, creating a repeated eyebrow-raising effect. The code imports `select` and `arc` from D3, uses SVG attributes for positioning, and centers the face by translating a group element based on the SVG’s width and height.

VVinod-VIX
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js, with circles for eyes and a mouth created via the d3.arc path generator. The face’s eyebrows, rendered as rectangles, animate upward and back down over four seconds using chained transition calls. The code builds the entire face through direct DOM selection and manipulation with d3.select and d3.append, positioning elements via SVG transform attributes.

AAkshada Pradhan
95% match