Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Mmishaldholakia
Last edited May 6, 2019
Created on May 6, 2019

A smiling face made of SVG shapes animates its eyebrows up and down in a looping cycle. The code uses D3.js selection, appending, and attribute manipulation to build a yellow circle head, two black eyes, rectangular brows, and an arc-shaped mouth from D3’s `arc` function. A chain of `transition` calls with two-second durations moves the eyebrow group up and down repeatedly, demonstrating fundamental DOM manipulation and view transitions within an SVG canvas.

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 smiling face built from SVG shapes animates its eyebrows up and down in a looping transition. The example constructs the face from basic geometric elements—a yellow circle for the head, two small circles for eyes, rectangles for brows, and an arc path for the mouth—centered via a translated group. Using D3 v5, the code applies chained `transition()` and `.attr()` calls to move the eyebrow group repeatedly, while the `d3.arc()` helper generates the mouth’s curved outline. The rendering relies on SVG appended directly to the page’s `<svg>` element.

Mmaber77
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG shapes animates as its rectangular eyebrows rise and fall in a looping two-second cycle. The example demonstrates core D3.js v5 DOM manipulation, using d3-selection methods like `select`, `append`, and `attr` to construct the face, and `transition` with a duration to move the eyebrow group. Rendered at 960 by 500 pixels, the face centers itself and draws a yellow circle, eyes, and an arc-based mouth using d3-shape's `arc`.

Ssunilkrishnav
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates as its eyebrows lift and lower repeatedly. The yellow circle head, eyes, and mouth are drawn using D3 selections with attributes like radius and position, while an arc path forms the smile. The eyebrows use D3's `transition().duration()` to shift vertically in a looping sequence. All shapes are centered via a translated group, with the example rendered entirely in SVG using d3.v5.

Jjmarcrum3
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 smiling face made of yellow SVG shapes animates its eyebrows upward and downward in a loop. Built with D3 v5, the example uses basic selections to append and style a circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth. The `arc` generator creates the mouth path, while chained `transition().duration()` calls animate the eyebrow group’s translate transform over two seconds each way. The SVG is centered via a translated group based on the viewport dimensions.

Bbluesibra
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes responds to a looping animated transition: the eyebrows move upward, hold, then return. The example demonstrates fundamental D3.js DOM manipulation, building the face from a yellow circle, two dark eyes, rectangular eyebrows, and a smile-shaped path generated with the `d3.arc()` function. D3.js v5 selects the SVG element, appends groups for coordinated positioning, and uses `transition().duration(2000)` to animate the eyebrow group's vertical offset. All elements are styled directly via attributes like `fill` and `stroke` within an 960×500 SVG canvas.

MMark Moesch
96% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by constructing a smiling face from SVG shapes. The code draws a yellow circular head, two eyes, and a mouth using an arc, then animates the eyebrows by moving a group element up and down. It uses `d3.select` to target the SVG, appends shape elements, and chains `transition().duration(2000)` calls to create the looping eyebrow movement. The rendering approach is SVG output, with all logic contained in a single JavaScript file.

Ggstriker050
96% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face made of SVG shapes animates its eyebrows in a looping motion. The example builds the face by centering a yellow circle, adding two eyes, and drawing a mouth using the `arc` generator from D3.js v5. Eyebrow rectangles are grouped and moved using `transition` and `attr` with a 2-second duration, shifting vertically up and down. The code imports `select` and `arc` directly from the `d3` module, sets attributes like `r`, `cx`, and `x` for positioning, and uses a 960×500 SVG canvas with a transform to center the composition.

DD2552
96% match