Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
NNameeeee
Last edited Mar 2, 2020
Created on Mar 2, 2020

A smiley face drawn with D3.js shows its eyebrows moving up and down in a looping animation. The code builds the face using SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. Eyebrow motion is created with chained `transition` and `duration` calls that alternate between two vertical positions. The example demonstrates fundamental DOM manipulation and data-driven styling using D3 v5’s selection, arc, and transition APIs.

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

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic SVG shape creation and animated DOM manipulation. The face consists of yellow circle for the head, two eyes, a mouth drawn with `d3.arc`, and rectangular eyebrows that move up and down using chained `transition().duration()` calls. The code uses D3 v5 selections, `append`, and attribute setters to construct the static elements, while the eyebrow animation shows how transitions can alter the `transform` attribute over time. This example highlights fundamental data-driven document manipulation without any external dataset.

Bbroomc
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with moving eyebrows demonstrates D3.js v5 DOM manipulation. The code builds the face using SVG shapes, appending a circle for the head, two circles for eyes, rectangular eyebrows, and a path generated with the `arc()` function for the mouth. The eyebrows animate upward and downward over two seconds using chained `transition()` and `attr()` methods. This example highlights fundamental D3 selection, attribute setting, and transition functionality.

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

Let's make a face with D3.js!

A D3.js animation builds a smiley face from SVG shapes, then makes its eyebrows bounce repeatedly as a looped transition. The face is composed of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth positioned with SVG transforms. The code imports `select` and `arc` from D3 v5 to generate the mouth path and manipulate elements. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down, demonstrating basic DOM selection and animation without data binding.

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

A smiley face built with D3.js demonstrates fundamental DOM manipulation and animation. The code uses `d3.select` to append SVG circle and rectangle elements for the face, eyes, and eyebrows, while a D3 arc path creates the mouth. Eyebrow movement is shown through chained `transition` calls that animate the group's transform attribute over two-second durations. The yellow face with black outlines highlights basic SVG rendering and D3's data-driven approach to styling and positioning.

Ccyanea1
96% match