Skip to main content
SimilarExport ZIP
100%

Face in D3.js

✓ Published1🌍 Public
CCaleb
Last edited Jun 17, 2020
Created on Jun 17, 2020
Forked from HTML Starter

This example uses D3.js to draw a yellow face with black eyes, eyebrows, and a mouth on an SVG canvas. The face is centered using a group element with a transform, while the eyebrows gently move up and down via chained transitions that animate a translate attribute over two seconds each. The mouth is created with an arc shape, and the code imports select and arc from the D3 library.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face with D3.js

A face built with D3.js is rendered as a yellow circle with black outline, featuring two eyes and a curved mouth, all contained in an SVG. The example demonstrates a simple animation where the eyebrows move up and down via a transition loop. The code uses D3's `select`, `append`, and `arc` APIs to construct the facial components, with the mouth created using an arc path with specified radii and angles. The entire composition is centered dynamically in the viewport.

WWayne716
93% match
Loading thumbnail…

Face With D3.js

A yellow face with black eyes and eyebrows is drawn in the center of a red SVG canvas. The code uses D3 v5 to create and style the shape, then animates the eyebrows upward and back down with `transition().duration()`. The mouth is drawn using the `d3.arc()` generator. The example demonstrates basic SVG rendering with D3 selections and transitions, without loading external data.

Wwusushi
92% match
Loading thumbnail…

Face with D3.js

This example shows a simple, stylized face built from SVG shapes. A yellow circle forms the head, with red circles for eyes, black rectangles for eyebrows, and a black arc path for the mouth. The code uses the D3.js v5 `select` and `arc` APIs within a React framework, and animates the eyebrows using chained `transition()` calls with a two-second duration to shift them upward and then back down.

Ddivinebooger
92% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
92% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
92% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a simple yellow face composed of SVG shapes, including eyes, eyebrows, and a mouth, all built programmatically with D3.js. The face is centered within a fixed viewport using a group transformation. The code uses D3’s `select` to target the SVG element and `append` to construct each shape, while the `arc` function generates the mouth’s path. An animated eyebrow movement is achieved by chaining multiple `transition().duration()` calls, which sequentially shift the eyebrow group’s vertical position.

Ccledevoute
92% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle face with black eyes and expressive eyebrows is drawn using D3.js v5 in an SVG. The code uses `select` to access the pre-defined SVG element, `arc` to generate the mouth path, and chained `transition().duration()` calls to animate the right eyebrow bouncing upward and downward. The face is centered using a translated `g` group, with hardcoded numeric values for spacing, radii, and offsets defining all facial features.

AAtarius Armstrong
91% match
Loading thumbnail…

Face D3

A yellow face drawn with D3.js SVG primitives animates its eyebrows in a looping motion. The face, constructed from circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth, is centered in an SVG canvas. The animation uses D3's transition system to move the eyebrow group up and down over two seconds each way. The code imports `select` and `arc` from D3 v5 and runs within a React framework.

Ssayleenaik
91% match