Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
AAndrew Yan
Last edited Jun 4, 2020
Created on Jun 4, 2020

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js v5. The code selects an SVG element, appends circles for the face and eyes, rectangles for eyebrows, and an arc path for the mouth using d3.arc(). D3 transitions move the eyebrow group up and down over four-second intervals. Static SVG attributes set positions and colors, while the transition chain animates the transform attribute.

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 yellow smiley face is drawn in SVG with D3.js, featuring animated eyebrows that move up and down. The code selects the SVG element, appends circles for the face and eyes, rectangles for the eyebrows, and an arc for the mouth using d3.arc. Eyebrow movement is achieved through chained transition().duration() calls that shift their vertical position. The example demonstrates fundamental DOM manipulation with D3's select and append methods, using static attributes and no external data.

VVito
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is constructed by appending SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all centered using a group transform. D3 transitions move the eyebrow group up and down over two-second intervals, while the `d3.arc` helper generates the mouth's curved path. The example uses d3.select and d3.arc from the D3 v5 library, with static SVG rendering and CSS to hide page overflow.

MMichał Szumnarski
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG circles, rectangles, and an arc path animates its eyebrows in a looping transition. D3.js v5 selections append and style the facial elements, while `transition.attr` shifts the right eyebrow’s vertical position over 2-second intervals. The mouth uses the `d3.arc()` generator to create a curved path. Static attributes set the face radius, eye spacing, and eyebrow dimensions.

TTrey Billing
97% 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
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation with D3.js v5. The code uses `d3.select`, `d3.append`, and `d3.arc` to build SVG elements, while chained `transition().duration(2000)` calls move the eyebrow group up and down. The mouth is drawn as an arc path, and circles and rectangles form the eyes and brows. Static SVG attributes define the geometry, with the entire face centered via a translated group.

Kkwanwoo100
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates D3.js v5 DOM manipulation. The code builds the face using SVG shapes, appending a circle for the head, two circles for eyes, rectangular eyebrows, and a path generated with the `arc()` function for the mouth. The eyebrows animate upward and downward over two seconds using chained `transition()` and `attr()` methods. This example highlights fundamental D3 selection, attribute setting, and transition functionality.

AA1L9E9X9
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau
97% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The SVG face is built using D3 selections to append a circle for the head, circles for the eyes, and an arc-generated path for the mouth. Two rectangles form the eyebrows, with the right eyebrow moving upward via a `transition` over two seconds. The code imports `select` and `arc` from the D3 v5 library and reads dimensions from the SVG attributes.

Iiascchwen
97% match