Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Jul 19, 2019

Created on Jul 19, 2019

Forked from Let's make a face with D3.js!

This example shows a simple animated smiley face drawn in an SVG canvas using D3.js. The face consists of a yellow circle, two eyes, eyebrows, and a mouth shape. It demonstrates core DOM manipulation with `d3.select` and `svg.append`, applying attributes like `attr('r')`, `attr('cx')`, and path building via `d3.arc`. The eyebrows animate through chained `transition().duration(2000)` calls, moving them down and back up over four seconds. The code uses D3 v6 and explicitly sets the SVG background to red via `svg.style`.

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!

This example demonstrates how to build a simple animated smiley face using D3.js. It shows a yellow circle with eyes, eyebrows, and a mouth, all constructed through fundamental DOM manipulation. The code uses `d3.select` to target the SVG element, `d3.append` to create shapes, and a chained `d3.transition` sequence to animate the eyebrows moving up and down over two-second intervals. The mouth is drawn as an arc using `d3.arc` with specified inner and outer radii. The rendering is SVG-based, with all elements positioned relative to the center of the canvas.

KKarkG

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black eyes and a curved mouth is drawn on an SVG canvas using D3.js. The example demonstrates fundamental DOM manipulation with methods like `select`, `append`, and `attr` to create circles, rectangles, and a path generated with the `arc` function. Animated eyebrows, rendered as rectangles, move up and down via chained `transition` calls with a 2000-millisecond duration, showcasing basic animation in D3 v6.

Bbbak92

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple animated smiley face using D3.js. A yellow circle with eyes and a mouth is constructed through fundamental DOM manipulation, using `svg.append` and `.attr` to create shapes. The face's eyebrows animate by chaining `.transition().duration()` calls to move them up and down repeatedly on the SVG canvas. The code explicitly uses D3's `select` and `arc` APIs to select the SVG element and draw the mouth path.

Vveagy

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js (v5) with SVG to render a smiley face with animated eyebrows. The code draws a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc for the mouth using `d3.arc()`. A chained `transition().duration(2000)` sequence moves the eyebrows upward and back over four seconds, demonstrating basic DOM manipulation and animation with `d3.select` and `append`. The fixed 960x500 SVG canvas centers the face via a translated group element.

Llujinxuan-fang

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes whose eyebrows animate upward and downward in a looping motion. The code demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending groups for positioning, and constructing circles, rectangles, and an arc-based mouth using `d3.select`, `d3.arc`, and chained `transition().duration()` calls. The face is centered via a translated group, with all coordinates calculated relative to the viewport dimensions.

Ggcappadaniel

96% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds an animated smiley face from basic SVG shapes, including a yellow circle, black eyes, an arc-based mouth, and eyebrow rectangles. The eyebrows move up and down repeatedly using chained `transition` and `duration` calls on the rectangle elements. The code imports `select` and `arc` from D3, appends shapes to an SVG canvas, and relies on D3 v5 for DOM manipulation and animation, with no external data source.

Lliunaiming

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, using circles for the eyes and an arc-generated path for the mouth. The eyebrows are rectangles that animate upward and back down via chained `transition().duration()` calls. The example demonstrates fundamental DOM manipulation with `d3.select`, `d3.arc`, and SVG attribute binding, with all geometry positioned relative to the viewport center.

Ppxdu

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, brown eyebrows, and a mouth created using the `d3.arc` path generator. The eyebrows, grouped with the eyes, animate downward over two seconds and then return to their original position, using chained `transition` calls on the group's `transform` attribute. The face is centered within an SVG canvas by translating a root group, with all shapes positioned relative to this group. The code demonstrates fundamental DOM manipulation, selection, and attribute handling in D3 version 6.

Yyycgrace

95% match