d3 Intro

100%

✓ Published1🌍 Public

Last edited Jan 30, 2022

Created on Jan 30, 2022

Forked from Shapes

A yellow circle with a black outline serves as a face, featuring two circular eyes, rectangular eyebrows, and a semi-circular mouth drawn using the d3.arc() generator. The eyebrows animate upward and then return to their original position through chained d3 transitions, each lasting 2000 milliseconds. The entire scene is rendered as static SVG elements selected via d3.select, with all shapes positioned using computed width and height attributes from the SVG element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Face With D3

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows, and a mouth drawn as an arc. The code uses d3-selection to append SVG shapes and d3-transition with chained 2000-millisecond transitions to move the eyebrows downward and back. The d3.arc() API generates the mouth path, while attribute manipulation handles positioning and styling.

Iikimes

90% match

Loading thumbnail…

Let's make a face with d3.js

A yellow circle with black outline forms a face via SVG. Two black eyes and rectangular eyebrows animate upward and downward in a repeating transition, while an arc-shaped mouth uses d3.arc. The code builds the face with d3.select, appends SVG shapes, and applies chained transition().duration() calls to move the eyebrow group. All elements are positioned via SVG attributes within a centered group.

JJustinS1209

90% match

Loading thumbnail…

Trying out D3.js

A yellow circle with a black outline, eyes, and a downward-curving arc mouth forms a static smiling face. The animation is limited to the eyebrows, which slide down and back up over two seconds using chained `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5 to build the SVG via appended groups and shapes, with elements positioned using explicit `attr` transforms and dimensions read from the SVG's height and width attributes.

JJuan David Bolaños Rojas

89% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black-outlined eyes, eyebrows, and an arc-shaped mouth is drawn using D3.js v5. The SVG elements are centered via a translation transform, and the mouth is created with the `d3.arc` generator. The eyebrows animate up and down using chained `transition().duration()` calls, moving their group container's transform over two seconds each way. The code selects the SVG, sets dimensions from its attributes, and appends all shapes.

GGeolffrey S Mena

89% match

Loading thumbnail…

Using SVG and D3

A yellow circle with black outline forms a face, featuring two dark eyes and animated eyebrows that raise and lower over time, alongside a curved mouth drawn as an arc. The SVG is centered within a 960 by 500 viewport, built entirely with D3 v5’s `select`, `append`, and `arc` APIs, using chained `transition` calls to animate the right eyebrow’s vertical position over two-second intervals.

NNoWizards

89% match

Loading thumbnail…

D3 Lets make a face

A yellow circle with black outlines forms a face, featuring two eyes and rectangular eyebrows that animate in a bouncing motion. The left eye pulses by scaling its radius via chained D3 transitions, while the entire eyebrow group shifts vertically. A mouth initially appears as a narrow arc, then expands into a filled semicircle using D3’s `arc` generator and a `transition` that updates the path’s `d` attribute. The example uses `d3.select` to manipulate SVG elements within a React framework.

Aant999

89% match

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a smiling face, featuring two black eyes and rectangular eyebrows that animate upward and then return to their original position. The face is constructed with D3.js v5 using SVG elements, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the d3.arc() API for the mouth. The eyebrows transition via chained transition().duration() calls on a group element, which shifts their vertical offset by 50 pixels over two seconds before resetting.

CClara Hu

89% match

Loading thumbnail…

D3 Face

A yellow circle with black strokes forms a face, featuring two eyes and eyebrows that animate in a blinking motion, while a mouth is drawn as an arc. The eyes scale vertically to simulate blinking, and the eyebrows shift upward twice before returning. Built with D3 v3, the visualization uses SVG elements and transitions, leveraging `select`, `arc`, and chained `transition` calls to orchestrate the timed animations.

JJonah Meijers

89% match