Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Ccharliemok
Last edited Mar 24, 2021
Created on Mar 24, 2021

A smiling face made of SVG shapes animates its eyebrows up and down in a loop. The demo shows how D3.js v5 selects and appends DOM elements, using `d3.select`, `d3.arc` for the mouth path, and chained `transition().duration()` calls to move the eyebrow group. A static yellow circle with black stroke forms the head, while black circles and rectangles compose the eyes and brows. The code relies on data-free hardcoded coordinates rather than a dataset.

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

Mmishaldholakia
95% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js visualization assembles a smiling face from basic SVG shapes and animates the eyebrows in a looping motion. The example demonstrates fundamental DOM manipulation by creating a yellow circle, two eyes, rectangular eyebrows, and a mouth path using d3.select and chained append and attr methods. A 2000-millisecond transition sequence moves the eyebrow group vertically, illustrating D3's transition subsystem and the d3.arc helper for constructing the mouth's curved path.

AAlex Drew
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiling face out of SVG shapes, with animated eyebrows that move up and down. A yellow circle forms the head, two circles serve as eyes, rectangles become eyebrows, and a path generated with the `d3.arc` helper creates the mouth. Using a `transition().duration(2000)` chain, the eyebrow group toggles its vertical translation, shifting it downward then returning it to the original position. The code explicitly binds SVG elements via `select` and `append`, relying on D3 v5’s modular imports for `select` and `arc`.

Rrjohnson5016
95% 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
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from D3.js SVG shapes animates its eyebrows upward and back down. The code uses `d3.select` to append circles, rects, and an `arc()`-generated path onto a 960×500 SVG, with a yellow circular head, black-outlined eyes, and a curved mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that translate the eyebrow group, demonstrating sequential SVG attribute tweening.

Ddev-ignacio-h
94% 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
94% match
Loading thumbnail…

Let's make a face with D3.js!

This D3.js v5 example demonstrates fundamental DOM manipulation by building a smiling face from SVG primitives, including yellow circles for the head and eyes, and rectangular eyebrows that animate upward and downward. The code constructs the face using `d3.select`, `svg.append`, and shape methods like `.attr`, while `d3.arc` generates the mouth as a path with specified inner and outer radii. A chained `transition().duration(2000)` sequence repeatedly moves the eyebrows up and down, creating a simple looping animation.

IIsabel
94% match