et's make a face with D3.js!

100%

et's make a face with D3.js!

✓ Published0🌍 Public

Last edited May 18, 2021

Created on May 18, 2021

Forked from Let's make a face with D3.js!

A smiley face rendered in SVG reacts with animated eyebrows as its eyes and mouth remain static. The demo builds the face using D3.js v5 selections to append a yellow circle, two eye circles, and a mouth path generated by the `arc` generator. The eyebrows, drawn as rectangles within a grouped transform, demonstrate chained `transition().duration()` calls to shift upward and back down over two seconds. The code imports `select` and `arc` directly from D3, and the entire face is centered via an SVG transform.

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

94% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js animates its eyebrows in a looping up-and-down motion. The example demonstrates fundamental SVG construction using D3 selections and shape generators, building the face from a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows transition vertically via chained `transition().duration()` calls, while `d3.arc` computes the mouth path. The code uses `select` and `arc` from D3 v5, with all elements positioned through SVG attributes.

VVerdidk

94% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is rendered in SVG using D3.js. The face is constructed from basic SVG shapes: circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth. The code uses D3 selections (`select`, `append`) and the `arc` generator, with `transition().duration()` to move the eyebrows up and down. The animation runs once, lifting the eyebrows 50 pixels and then returning them to their original position, demonstrating fundamental DOM manipulation with D3 v5.

PPhilippe Rigovanov

93% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates core D3.js DOM manipulation. The SVG face uses `d3.select` to append circles for the eyes and face, and an `arc` generator to draw the mouth. Eyebrows are rectangles that move up and down via chained `transition().duration()` calls, shifting the eyebrow group's transform. The code imports `select` and `arc` from the d3 module, builds the face from nested SVG groups, and runs in a 960×500 viewport.

Nnancynobody

93% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG with D3.js shows animated eyebrows that move upward and downward in a looping transition. The code builds the face by appending a yellow circle for the head, two smaller circles for eyes, and a mouth path using D3's `arc` generator. Eyebrows are rectangles that animate via chained `transition().duration()` calls, shifting their y-position. The example demonstrates fundamental DOM manipulation with D3 selections and SVG attributes, using d3.select and d3.arc from the D3 v5 library.

PPetetoni

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

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build a simple smiley face out of SVG shapes, with animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation through method chaining: appending circles and rectangles to construct the face, and using `transition().duration()` to move the eyebrow group. The code imports `select` and `arc` from D3 v5, and draws the mouth with the `arc()` path generator. A yellow circle with a black stroke forms the head, with eyes and eyebrows positioned via SVG transforms.

Ffaaty

93% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a smiley face built entirely with D3.js SVG elements, whose eyebrows animate upward and then return to their original position. The face is constructed using `select` and `append` to create a yellow circle for the head, two circles for the eyes, rectangles for the eyebrows, and a mouth path drawn with the `arc` helper. The animated eyebrow movement is driven by chained `transition` calls with a 2-second duration, using `attr` to update the transform translation. The code renders to a static SVG canvas and relies on D3 v5, with all geometry defined through explicit pixel offsets.

MMMoronto

93% match