Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
ÁÁlvaro Cáceres Muñoz
Last edited Feb 12, 2021
Created on Feb 7, 2021

A smiling face built from basic D3.js shapes animates its eyebrows upward and back. The visualization uses D3 v6’s `select` and `append` to construct SVG circles for the skin and eyes, rectangles for the eyebrows, and a `path` defined by `arc()` for the mouth. Eyebrow motion comes from chained `transition().duration().attr()` calls, transforming the eyebrow group’s vertical position. The static SVG canvas is 960 by 500 pixels, with all elements positioned relative to the face’s center.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation constructs a smiling face from SVG shapes and then animates its eyebrows. The face is drawn using circles for the eyes and head, rectangles for the eyebrows, and a path for the mouth, created with the `arc` shape generator. Eyebrow movement occurs through chained `transition().duration()` calls on the group’s `transform` attribute, shifting it vertically. The code uses D3 v5 selection, attributes, and the `arc` API, rendering all elements as SVG within a 960 by 500 canvas.

AAntonino Praxedes
95% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, and its eyebrows animate upward and downward in a loop. The face is constructed using D3.js v5’s `select` and `append` to create circles for eyes, rectangles for eyebrows, and a `path` for the mouth via the `arc` shape generator. The eyebrows’ movement is driven by chained `transition().duration()` calls that alter the group’s `transform` attribute. The code relies on D3’s DOM manipulation and transition APIs, with all rendering occurring in an SVG viewport.

JJuan Carlos
95% match
Loading thumbnail…

Let's Make a face with D3.js

A simple smiling face drawn with D3.js version 5 animates its eyebrows. The visualization uses basic SVG shapes—circles for the face and eyes, rectangles for the brows, and an arc-generated path for the mouth—all positioned relative to a central group. The eyebrows perform a two-second upward and downward transition using chained `transition().duration()` calls. The code leverages D3’s `select`, `arc`, and selection methods to construct the graphic on a red background, with the entire figure centered in a 500×500 SVG canvas.

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

This example displays a smiling face with animated eyebrows built entirely through D3.js v5 DOM manipulation. The SVG face consists of circles for the eyes and head, a path for the mouth, and rectangles for the eyebrows, all positioned relative to a centered group element. Using D3's selection API (`d3.select`, `d3.append`) and the `transition` method, the eyebrows animate vertically over two seconds, moving up and then returning to their original position. The drawing relies on hardcoded numeric coordinates rather than external data.

Aalicenie
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn in SVG animates as its eyebrows repeatedly rise and fall. The example demonstrates fundamental D3.js DOM manipulation by using `select`, `append`, and `attr` to construct circles, rectangles, and a path for the mouth, with an `arc` generator for the smile. The eyebrow motion is driven by a two-stage `transition` with a two-second duration each, moving a group element vertically to create the expressive loop.

AArriannePandaraoan
94% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with D3.js animates its eyebrows in a looping vertical motion. The visualization demonstrates core SVG manipulation through D3 selections, appending circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Chained `transition()` calls with 2000-millisecond durations continuously shift the eyebrow group’s transform attribute, creating the expressive movement against a 960×500 SVG canvas.

UUGarCil
94% match