Face Time! D3.js

100%

Face Time! D3.js

✓ Published2🌍 Public

Last edited Jan 28, 2020

Created on Jan 28, 2020

A smiling face rendered in SVG animates its pupils downward, creating the effect of blinking eyes. The illustration uses basic geometric shapes: circles for the head, eyes, and pupils, plus a D3 arc path for the smile. Built with D3.js v5, the animation is driven by chained transitions that move the pupil positions over set durations. The SVG canvas is 960 by 500 pixels, with shapes styled via attributes like fill and stroke.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Face with D3.js

A smiling face is drawn as a yellow SVG circle with white outlines, featuring two black eyes that animate by moving down and up via chained `transition().duration()` calls. Built with D3.js v5, the example demonstrates basic SVG shape creation using `d3.select` and attribute assignment for circles, with a commented-out arc-based mouth showing an alternative path approach. The eyes use transform translations over three-second intervals, creating a simple blinking effect without external data.

Aarontha

88% match

Loading thumbnail…

d3-face

A smiling face rendered in SVG animates as its pupils shift to the right. Built with D3 v5, the example uses `d3.select` to append circles for the face, eyes, and pupils, while `d3.arc` generates the mouth path. A `transition().duration(2000)` moves each pupil over two seconds, demonstrating basic shape construction and animation within a static HTML page.

JJames Malvern

88% match

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiley face in an SVG canvas using D3.js, with animated eyes that repeatedly expand and contract their pupils. It demonstrates fundamental DOM manipulation through D3 selections, appending circles, paths, and groups, while leveraging the arc generator to shape the eyes, eyebrows, and mouth. The code specifically uses d3.select and d3.arc from D3 v5, and the pupil animation is driven by chained transition calls that alternate the circles’ radii. The face is centered via a translated group, and positioning relies on hard-coded constants for eye spacing and offsets.

RRyan Fleming

87% match

Loading thumbnail…

Face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows and mouth in a looping transition. The code builds the face using D3.js v5 selection and append methods to create circles, rectangles, lines, and an arc-based path, all positioned with hardcoded coordinates. The eyebrows shift upward and the mouth changes thickness through chained `transition().duration(3000)` calls, demonstrating basic DOM manipulation and attribute updating without data binding.

Nnikeshkv

87% match

Loading thumbnail…

Face with D3.js!

A cheerful, animated face rendered entirely with D3.js SVG shapes. The code draws a yellow circular head, two red eyes, blue rectangular eyebrows, and a purple arc-shaped mouth, all positioned within a responsive coordinate system. The eyebrows use the `transition` API to animate horizontally back and forth over six seconds. The face is built by composing basic SVG primitives—`circle`, `rect`, and `path` elements—using D3's `select` and `attr` methods, while the mouth is generated with the `arc` generator.

Ssslee8778960

86% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates through D3.js v5, using circles for the eyes and face, rectangles for eyebrows, and a path with the d3.arc generator for the mouth. The code demonstrates SVG element construction, attribute binding, and a chained transition that moves the eyebrows up and down over two seconds. A decorative bindhi path and sparkle circle add detail, with all elements grouped and translated relative to the SVG canvas center.

EEllen Cubbin

86% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG animates its eyebrows, pupils, and cheeks. The code constructs the face using D3.js v5, creating circles for the head, eyes, pupils, cheeks, and an arc path for the mouth. Animation is achieved through chained `transition().duration()` calls on the SVG groups, moving the eyebrows and pupils in a repeating pattern. The example demonstrates fundamental DOM manipulation with D3's `select` and `append` methods, alongside the `arc` generator for the mouth and eyebrow shapes.

CChooo4u

86% match

Loading thumbnail…

Face with D3.js!

A cheerful cartoon face rendered in SVG appears on screen, built entirely with D3.js v5. The code uses `d3.select` and `d3.arc` to construct a yellow circle head, red eyes, blue rectangular eyebrows, and a purple arc-based mouth. The eyebrows animate via chained `transition()` calls, sliding inward and outward over three-second intervals. The example demonstrates composition of SVG primitives and basic animation without external data.

Ssslee8778960

86% match