Let's Make a face with D3.js!

100%

Let's Make a face with D3.js!

✓ Published0🌍 Public

Last edited Sep 20, 2020

Created on Sep 20, 2020

This example uses D3.js to draw a smiling face entirely with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The code employs ES6 imports, selections, and attribute setters to construct the face, centered within a 960x500 SVG. The eyebrows feature an animated loop using chained `transition` calls with `.duration(2000)`, moving them up and down over two seconds each way. The visualization demonstrates basic SVG composition and D3’s transition API for simple motion.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a smiling face out of basic SVG shapes: a yellow circle for the head, two eyes, and a mouth created with the `arc` generator. Eyebrows animate by repeatedly shifting their vertical position via chained `transition().duration(2000)` calls on a group element. The code relies on D3 selections and `select`, with dimensions read from the SVG attributes. The simple, playful design demonstrates how D3 can drive both static shape construction and time-based transformations in an SVG scene.

Cchristoshanes

96% match

Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Ddtdenver

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!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger

95% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG in D3.js animates as its eyebrows and pupils shift side to side. The example demonstrates fundamental DOM manipulation by directly selecting SVG elements and appending circles, rectangles, and a path for the mouth, with the mouth drawn using D3's `arc` generator. Animated transitions change the position of the eyebrows and pupils over two-second intervals, while static attributes set the face's yellow fill and black stroke. The code relies on D3 v5 and shows how to chain selections and transitions without data binding.

Rrebeccayc

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a smiling face from basic SVG shapes, including a yellow circle for the head, black circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups, and positioning shapes with the `attr` method. Eyebrows animate by using chained `transition().duration(2000)` calls to move their group vertically, first upward and then back to the original position. The example highlights D3’s `select` and `arc` APIs for creating and transforming visual elements.

QQiushi

95% match

Loading thumbnail…

Let's make a Face with D3.js!!!

This example uses D3.js to construct a smiling face from basic SVG shapes, including a yellow circle head, two eyes, animated eyebrows, and an arc-based mouth. The code imports `select` and `arc` from D3, appends shapes to an SVG canvas, and applies chained transitions to the eyebrows to make them move up and down over two-second intervals. The visualization renders entirely in SVG and demonstrates D3’s ability to create and animate custom graphics without external data, relying instead on hardcoded coordinates and dimensions.

Ddevdutta

95% match