Skip to main content
SimilarExport ZIP
100%

make a face with D3.js!

✓ Published1🌍 Public
Rradiohead-lgl
Last edited Sep 8, 2021
Created on Sep 8, 2021

A pink smiley face rendered with D3.js animates by moving its eyebrows up and down. The example shows fundamental DOM manipulation, drawing a circle for the head, arcs for the mouth, and rectangles for the brows, all positioned with translation transforms. It uses `d3.select` and `d3.arc` from d3.v7, with chained `transition().duration()` calls to create the eyebrow animation.

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 D3.js smiley face is drawn with SVG shapes, including pink circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate by moving downward and upward repeatedly using chained `transition()` calls with `duration(1000)`. The example demonstrates basic DOM manipulation with `d3.select`, shape generation via `d3.arc`, and attribute setting on SVG elements.

Ggrandbleu916
92% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js animates its eyebrows in a looping vertical motion. The example demonstrates fundamental DOM manipulation by selecting an SVG canvas and appending circles, rectangles, and a mouth path using `d3.select` and `d3.arc`. Eyebrow movement relies on chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute up and down. The face is centered via a translated `<g>` element, with static geometry defined by numeric constants for eye spacing, radius, and eyebrow dimensions.

AAXE
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate upward and downward. It uses D3 selections and the `arc` generator to construct the face’s circular head, eyes, rectangular eyebrows, and mouth as SVG elements. The eyebrows move via chained `transition().duration()` calls, shifting their group’s transform attribute over two seconds in each direction. The code explicitly leverages `select`, `attr`, and `append` from d3.v5, with no external data source, relying entirely on hardcoded geometric values.

Llystran
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate upward and downward. It uses D3 selections and the `arc` generator to construct the face’s circular head, eyes, rectangular eyebrows, and mouth as SVG elements. The eyebrows move via chained `transition().duration()` calls, shifting their group’s transform attribute over two seconds in each direction. The code explicitly leverages `select`, `attr`, and `append` from d3.v5, with no external data source, relying entirely on hardcoded geometric values.

Llystran
91% match
Loading thumbnail…

Let's make a face with D3.js!

This interactive example shows a smiley face with animated eyebrows built using D3.js. The face is composed of SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth—all centered via a transformed group. The eyebrows move up and down using chained `transition` calls with a 2000-millisecond duration. The code uses D3 v5 selectors to query the SVG, `arc` to generate the mouth’s path, and direct attribute setters for positioning.

Kkesmith21
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face with animated eyebrows demonstrates basic DOM manipulation with D3.js. The visualization renders SVG shapes—a yellow circle, eyes, rectangular eyebrows, and an arc-based mouth—centered on a 960×500 canvas. Using `d3.select` and `d3.arc`, the code constructs each facial feature programmatically. A chained `transition` with 2000-millisecond durations moves the eyebrow group upward and back, creating a blinking-like motion. The example showcases fundamental D3 v5 selections, attribute setting, and animation without external data, relying purely on geometric constants for positioning.

TThiago Ramos
91% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with D3.js demonstrates declarative DOM manipulation through basic SVG shapes, while animated eyebrows show how transitions update attributes over time. The code explicitly builds the face using `select`, `append`, and `attr` for circles, rectangles, and a mouth path via the `arc()` generator. Two chained `transition().duration(2000)` calls move the eyebrow group up and then back down, creating a repeated motion loop. The face is centered with a `g` transform, and all styling relies on inline attributes with yellow and black fills.

GGosroPoorheydar
91% 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
91% match