d3-face

100%

✓ Published4🌍 Public

Last edited Feb 26, 2021

Created on Feb 24, 2021

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

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

91% match

Loading thumbnail…

Face with d3.js!

This example composes a smiling face from primitive D3.js shapes, including circles for the face and eyes, rectangles for eyebrows, and an annular arc path for the mouth. It demonstrates D3’s `select` and `arc` APIs to build and position SVG elements. The face is centered using a translation transform, and a chained `.transition()` sequence animates the eyebrows up and down over two seconds, showcasing D3’s attribute-tweening capabilities for simple motion.

Ssalim.mir@outlook.com

89% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built with SVG in D3.js animates as its eyebrows and pupils shift side to side. The example demonstrates fundamental DOM manipulation by directly selecting SVG elements and appending circles, rectangles, and a path for the mouth, with the mouth drawn using D3's `arc` generator. Animated transitions change the position of the eyebrows and pupils over two-second intervals, while static attributes set the face's yellow fill and black stroke. The code relies on D3 v5 and shows how to chain selections and transitions without data binding.

Rrebeccayc

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

89% match

Loading thumbnail…

Face visualization with D3

This example builds a smiling face using D3 v5, rendered as an animated SVG. It constructs the head, eyes, eyebrows, and mouth from primitive shapes, with the eyebrows performing a looping vertical bounce via chained `transition` calls. The code uses D3’s `select` and `arc` APIs directly, setting shape attributes like `r`, `cx`, and `cy` to position elements relative to the SVG’s center. The face’s layout is defined by constants for eye spacing and offsets, demonstrating a simple, reusable composition pattern.

PPavel Antoshkin

89% match

Loading thumbnail…

D3 Face

A smiling face rendered in SVG animates its mouth and eyelids using D3 transitions. The code draws a yellow circle for the head, positions two eyes, and constructs an arc-based mouth with `d3.arc()`. The mouth transitions between two arc radii over two seconds, while rectangular eyelids move up and down using chained `.transition().duration()` calls. Built with D3 v5 selections, the example demonstrates SVG shape manipulation and timed animations within a React-free HTML page.

Mmanoj5464

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

89% match

Loading thumbnail…

Face made with d3.js

A face built from SVG primitives animates through a series of facial expressions. The circular face, positioned via an SVG group transform, holds two eyes that pulse by scaling their radius. Eyebrows shift vertically and rotate, while the mouth, drawn with the `d3.arc` path generator, expands and contracts its inner and outer radii. The `d3.selection.transition` API orchestrates these 2000-millisecond animations, creating a looping, humorous sequence. The example uses d3.v7 to manipulate and transition the SVG elements directly.

SSebastian Barrett

89% match