Trying out D3.js

100%

Trying out D3.js

✓ Published1🌍 Public

Last edited Feb 3, 2020

Created on Feb 3, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a smiling arc mouth is drawn in SVG using D3 v5. The example demonstrates basic shapes and transitions, with the eyebrows moving up and down in a looping animation via chained `transition` calls. Code imports `select` and `arc` from D3, uses SVG attributes like `cx`, `r`, and `path` with an `arc` generator, and positions elements relative to the SVG center. Static eye circles and a mouth path complete the composition.

GGulrez

91% match

Loading thumbnail…

D3.js introduce

This example builds a playful face from basic SVG shapes using D3.js v5. A yellow circle forms the head, with two white ellipses as the background for the eyes, while two dark circles animate upward and change to white over two seconds via `transition().duration()`. A brown arc, created with the `d3.arc()` generator, renders a smiling mouth. The code uses D3 selections to append and style each element, and relies on the `select`, `arc`, and attribute chaining methods to construct the static composition and the animated eye movement.

Wwyh1029

90% match

Loading thumbnail…

Hello D3.js!

A cheerful face with yellow circular head, black-outlined features, and a smiling arc mouth is drawn using SVG. The eyes and eyebrows animate upward and back down repeatedly using chained `transition().duration()` calls. Built with React and D3 v6, the example selects the SVG element, computes dimensions from its attributes, and uses the `arc()` generator from D3 to create the mouth path. The code demonstrates basic D3 selections, attribute manipulation, and timed animations.

Aalotia

90% 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

90% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263

90% match

Loading thumbnail…

Lets make a face with D3.js!

A yellow circle with black outlines forms a face, complete with two eyes, animated eyebrows that move up and down, and a curved smile drawn using D3's `arc` generator. The SVG elements are positioned relative to a centered group, with the eyebrows animating through chained `transition` calls that alter the group's transform over two-second intervals. This example uses D3 v5's `select` and `arc` functions to build and animate the face entirely in the browser.

AAdeola Oni

90% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black stroke, white eyes, and an arc-shaped mouth animates through a series of transformations. The eyes, pupils, eyebrows, and mouth scale, rotate, and shift position in sequence using D3.js v5 transitions with `transition.duration`. The SVG is centered via a `g` element translated to the middle of a 960×500 canvas. The code imports `select` and `arc` from D3, using `arc()` to generate the mouth path and chained transitions to create the animated effects.

Iisaachowen

90% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and a curved mouth drawn using D3's `arc` generator. Eyebrow rectangles transition vertically via chained `transition().duration()` calls, moving down and back up over two seconds each way. The SVG is centered using a `g` element translated to the middle of a 960×500 viewport, with all shapes positioned relative to that origin. The example uses D3 v5, importing `select` and `arc` from the library.

Sscotti15

90% match