KH makes a face with D3.js

100%

KH makes a face with D3.js

✓ Published3🌍 Public

Last edited Aug 26, 2021

Created on Aug 25, 2021

A face drawn with SVG primitives in D3.js animates its eyebrows. A yellow circle forms the head, with black circles for eyes and a semi-circular arc for the mouth. The eyebrows, rendered as rectangles, shift vertically through a chained transition over four seconds. The code uses d3.select, d3.arc for the mouth path, and d3.transition to move the eyebrow group between two positions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

KH makes a map with D3.js

A map-like face built from SVG shapes animates its eyebrows in a looping bounce. The code constructs a yellow circle head with eyes, eyebrows, and an arc-based mouth using D3 v7 selections. Eyebrow rectangles move via chained `transition()` calls with a two-second duration each, while the mouth is drawn with the `arc()` generator from D3’s shape module. The static SVG canvas is 960 by 500 pixels, and the animation runs continuously without external data.

KKyleHincz

93% match

Loading thumbnail…

Let's make a face with D3.js!

A simple D3.js face built from basic SVG shapes—a yellow circle for the head, two eyes, animated eyebrows, and an arc-based mouth—is centered on a blank canvas. The eyebrows continuously move up and down using chained `transition()` calls over two seconds each. The visualization demonstrates fundamental D3 v5 concepts, including `select` for DOM access, `attr` for positioning, and the `arc` generator to create the mouth path, with all elements drawn as SVG primitives.

KKCachel

84% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black-outlined features is rendered in SVG, and its eyebrows animate upward and back down over four seconds. Built with D3 v5, the example uses `d3.select` to target the SVG, `d3.arc` to generate the mouth path, and chained `transition().duration()` calls to move the eyebrow group. The face is centered via a translated `g` element, with eye spacing, radius, and eyebrow dimensions defined as constants. No external data is loaded; all shapes are constructed programmatically from hard-coded values.

Ppcbt1125

84% match

Loading thumbnail…

Let's make a face with D3js

A yellow circle face with two eyes and animated eyebrows is drawn using D3.js v7. The code uses `select` to target the SVG element, `arc` for the mouth path, and chained `transition().duration()` calls to animate the eyebrows vertically. The construction translates groups via `.attr('transform', ...)` to position facial features relative to the center.

Ppml31780

84% match

Loading thumbnail…

Let's make a face with D3.js!

A face drawn with D3.js appears as a yellow circle with eyes, animated eyebrows, and a mouth. The example demonstrates D3 v7's declarative DOM manipulation, using `d3.select`, `d3.arc`, and chained `transition` calls to animate eyebrow positions. The SVG rendering includes circles, rectangles, and a path defined by arc parameters. The code sets up a central group, positions facial features with explicit coordinates, and applies a two-second eyebrow movement sequence.

JJuyeonee

84% match

Loading thumbnail…

make a face with d3.js

A smiling face drawn with basic SVG shapes animates its eyebrows in a looping motion. The example builds a yellow circle for the face, adds two black eyes and a mouth, then runs a repeating transition that moves the eyebrows upward and back down. It uses D3 v5 selections, the `arc()` generator for the mouth path, and chained `transition().duration()` calls to create the animation. The code constructs the layout relative to the SVG’s center and uses the `translate` attribute for positioning.

Kkrishv2

83% match

Loading thumbnail…

Let's make a face with D3.js

A yellow D3.js face with a black stroke, eyes, and a mouth is drawn in SVG and animates its rectangular eyebrows up and down over two-second transitions. The code uses `select` and `arc` from D3 v5, setting circle radii and positions, and applies chained `transition().duration()` calls to move the eyebrow group. The face is centered in a 960×500 SVG, with the mouth rendered as a donut-like arc path.

Ooptimizeresume

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

83% match