KH makes a map with D3.js

100%

KH makes a map with D3.js

✓ Published0🌍 Public

Last edited Sep 26, 2021

Created on Sep 26, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

KH makes a face with D3.js

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.

KKyleHincz

93% match

Loading thumbnail…

MAP make D3.js!

A D3.js example demonstrates fundamental DOM manipulation by rendering a yellow smiley face with animated eyebrows. The SVG circle forms the face, while `d3.arc()` creates the mouth path. The code uses D3 selections and transitions to move rectangular eyebrows vertically over two seconds, then back. It imports `select` and `arc` from d3.v5, builds the graphic in an SVG container, and animates the eyebrow group's transform attribute.

KKyleHincz

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

81% match

Loading thumbnail…

Map D3

A yellow circle with black outline, two eyes, eyebrows, and an arc-shaped mouth form a simple face. The visualization uses D3 v5 to build the SVG scene, with `select`, `arc`, and `transition` APIs for rendering and animation. The left eyebrow animates via a chained `transition` call, while all shapes are positioned relative to a centered group. The example demonstrates basic SVG drawing and animation with D3’s declarative method chaining in a minimal framework.

CChristopher Repka

81% match

Loading thumbnail…

MAP make a with D3.js!

A yellow smiley face rendered in SVG animates its eyebrows upward and back down in a looping two-second transition. Built with D3.js v5, the example uses `d3.select`, `d3.arc` for the mouth, and SVG circles and rectangles for facial features. The eyebrow movement is driven by sequential `transition().duration()` calls that modify the group’s `transform` attribute.

KKyleHincz

80% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple yellow face using D3.js v5 and SVG shapes, with a large circle for the head, two smaller circles for eyes, rectangular eyebrows, and an arc-generated mouth. The eyebrows animate by translating up and down using chained `transition().duration()` calls on a group element. The code uses D3’s `select`, `arc`, and attribute-setting methods to construct the static elements, while the animation relies on D3’s transition system applied to SVG transforms. The data is hardcoded as constants for spacing, offsets, and radii, and the scene is centered within a 960×500 SVG canvas.

Kkh-tm

80% match

Loading thumbnail…

Let's make a face with D3.js!

A playful D3.js example builds a cartoon face from SVG shapes, showing a yellow circle with black-outlined eyes, animated eyebrows, and an arc-based smile. It renders entirely in SVG within a 960×500 viewport, using `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows upward and back over three seconds. The face is centered via a group transform, with fixed pixel constants for eye spacing, radius, and eyebrow dimensions. No external data is loaded, as all geometry is hardcoded in JavaScript.

Kkartikaymanoj

80% match

Loading thumbnail…

d3map

This example draws a simple cartoon face using D3 v6, constructing a yellow circular head with black eyes, eyebrows, and a mouth. The code uses d3.arc to create the mouth path and shows mouseover and mouseout console events on that shape. The eyebrows animate by transitioning their group’s transform attribute between two positions over 500 milliseconds each. All shapes render as SVG elements, positioned relative to the center of the 960 by 500 pixel viewport.

Nnstafford

80% match