Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Tthanhtrant219
Last edited Apr 15, 2020
Created on Apr 15, 2020

A smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

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 smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

Tthanhtrant219
100% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn using D3.js v5 with SVG shapes, including a yellow circle for the head, eyes, eyebrows, and a mouth created with the `arc` generator. The eyebrows animate upward and back down over four seconds using chained `transition` and `attr` methods. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups, and positioning elements via translation transforms. All coordinates and dimensions are computed from the SVG's width and height attributes.

Tthanhtrant219
100% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG shapes with D3.js v5, including two eyes, a mouth created via the `d3.arc` generator, and rectangular eyebrows. The eyebrows animate upward and back down over two sequential two-second `transition` calls on their containing group’s `transform` attribute. The code demonstrates fundamental DOM manipulation by selecting the root `svg` element, appending groups, and positioning shapes with absolute coordinates derived from the viewport dimensions.

Jjunge870214
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and a curved mouth created via the `d3.arc` path generator. The code demonstrates fundamental DOM manipulation by selecting an `<svg>` element and appending grouped shapes to it. The eyebrows animate upward and downward using chained `transition().duration()` calls on a group element, while the face’s geometry is positioned relative to the SVG’s center.

MMarian
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and a curved mouth created via the `d3.arc` path generator. The code demonstrates fundamental DOM manipulation by selecting an `<svg>` element and appending grouped shapes to it. The eyebrows animate upward and downward using chained `transition().duration()` calls on a group element, while the face’s geometry is positioned relative to the SVG’s center.

MMarian
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with D3.js, rendered as SVG shapes and animated with the transition API. The code uses D3 v5 to construct a yellow circle head with eyes and a path-based mouth, generated via the `arc` function with specified inner and outer radii. Eyebrows move up and down over two seconds using chained `transition` calls, showcasing animation of SVG attributes. The example relies on D3's `select` and `append` for DOM manipulation, with geometry defined by variables for spacing and offsets.

YYunLing
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG uses D3.js to build its geometry, including a yellow circle, two eyes, a mouth via `d3.arc`, and rectangular eyebrows. A `transition` on the eyebrow group animates their vertical position over two seconds, moving them up and down repeatedly. The code employs `d3.select`, `d3.scaleLinear`, and attribute setters to construct the scene, with a fixed SVG canvas sized 960 by 500 pixels.

Ppanmenghan
95% match