Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published1🌍 Public

Last edited Sep 17, 2020

Created on Sep 17, 2020

Forked from Let's make a face with D3.js!

A smiling face rendered as SVG shapes in D3.js v5 shows animated eyebrow movements. The code builds the face using `d3.select`, `d3.append`, and `d3.arc` to create a yellow circle head, two eyes, and a mouth. Eyebrows are rectangles that move up and down via chained `transition().duration()` calls, each lasting two seconds. The example demonstrates fundamental DOM manipulation with D3's imperative API, drawing all elements on a 960×500 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 is drawn with D3.js as a yellow circle, complete with eyes, a mouth, and eyebrows that animate by moving up and down. The code uses D3's selection and DOM manipulation methods to build the SVG structure, while `transition().duration(1000)` creates the repeating eyebrow motion. The face is constructed using basic SVG shapes like `circle` for the head and eyes, a `path` for the mouth via D3's arc generator, and `line` elements for the eyebrows, all centered within an SVG canvas.

SShady Mohammed

96% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with D3.js, rendered as SVG shapes and animated with the transition API. The code uses D3 v5 to construct a yellow circle head with eyes and a path-based mouth, generated via the `arc` function with specified inner and outer radii. Eyebrows move up and down over two seconds using chained `transition` calls, showcasing animation of SVG attributes. The example relies on D3's `select` and `append` for DOM manipulation, with geometry defined by variables for spacing and offsets.

YYunLing

96% 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

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

95% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by constructing a smiley face from SVG shapes, with a gentle animation of its eyebrows. The code builds a yellow circle head, eyes, and a mouth using D3’s `select`, `attr`, and an `arc` generator for the path. The eyebrow rectangles transition vertically via chained `transition().duration(2000)` calls, moving them down and back up. It uses D3 v5, rendering to a static SVG canvas with no external data, focusing purely on programmatic element creation and animation.

Nnshedd

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

95% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiling face from SVG primitives, with animated eyebrows that move up and down over time. The face consists of a yellow circle, two eyes, eyebrows, and a mouth drawn using an arc path. The animation is handled through chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute, creating a simple looping motion. The code relies on methods like `select`, `append`, and `attr` for DOM manipulation, along with D3’s `arc` generator for the mouth shape.

Vveagy

95% match