Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published5🌍 Public

Last edited Nov 1, 2020

Created on Nov 1, 2020

A D3.js example draws a yellow smiley face with SVG shapes, then animates its eyebrows in a bouncing motion. The face is centered using an SVG group with a translation transform, and its features are built from circles, rectangles, and an arc path generated with the `d3.arc` function. Eyebrows transition vertically via chained `transition.attrTween`-like `transition().duration()` calls, moving down and back up repeatedly. The code uses D3 v6 selections and transitions, with no external data source, relying purely on geometric constants for layout.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Ddtdenver

96% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example constructs a yellow smiley face with animated eyebrows using SVG. The face is composed of a circle for the head, two circular eyes, and a mouth drawn with the `d3.arc` helper. Eyebrows are rendered as rectangles and animated with chained `transition().duration()` calls, moving them up and down repeatedly. The code uses D3 selections and attribute manipulation to build the SVG scene from scratch, with no external data—only hardcoded geometric values for positioning and sizing.

AArthur Ayestas Hilgert

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, featuring eyes, eyebrows, and a mouth rendered as SVG shapes. The code uses D3 selections to append a circle for the face, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. A chained `transition` with a 2-second duration animates the eyebrow group’s vertical position upward and then back, creating a moving-brow effect. The face is centered within a 960×500 SVG, and the animation runs once on page load.

Aarg04

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes whose eyebrows animate upward and then back down. It demonstrates basic DOM manipulation with D3.js. The code uses `d3.select` and `svg.append` to build the face's circle, eye, and rectangular eyebrow elements, while the mouth is drawn with the `d3.arc` path generator. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on the brows’ parent group, moving it up and then returning it to its original position.

Ccguibourg

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn inside an SVG using D3.js v5. The code creates the face’s head, eyes, and mouth with `select`, `append`, and `arc` for the smile path. Eyebrows are rectangles whose vertical position animates in a loop via chained `transition().duration()` calls, moving up and down. The example demonstrates fundamental DOM manipulation and data-driven shape generation without external data, relying solely on the D3 library.

Mmin

96% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js, whose eyebrows animate upward and then back down in a looping transition. The face is constructed entirely with SVG elements—circles for the eyes and head, rectangles for the eyebrows, and a path generated by the `d3.arc` function for the mouth. D3’s selection and transition APIs, including `transition().duration()`, are used to move the eyebrow group over time. The code uses D3 v5 with a static SVG canvas, relying on `d3.select` and attribute manipulation for rendering.

DDeepanshuu

96% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic SVG creation and DOM manipulation using D3.js. Code builds the face from circles, rectangles, and an arc path generated with the `d3.arc` helper, all centered within an SVG element. Eyebrows move via chained `transition().duration()` calls that shift their vertical position. The example relies on D3 selections, attribute setters, and the `select` function, with no external data source. The face renders as static SVG geometry aside from the transitioning eyebrow rectangles.

VVijay2051

96% match