Fork of Create a face with d3.js!

100%

Fork of Create a face with d3.js!

✓ Published0🌍 Public

Last edited Oct 9, 2023

Created on Oct 9, 2023

A yellow circle forms a smiling face with two eyes, eyebrows, and an arc-shaped mouth built from SVG shapes. The eyebrows animate upward and back down over two seconds using chained D3 transitions. The example imports `select` and `arc` from the D3 v7 library, loads the script from UNPKG, and renders to an SVG canvas with a static data-less design.

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…

Fork of Create a face with d3.js!

A smiling yellow face drawn with SVG circles and arcs is centered in a 960x500 viewport. The face is assembled using D3 selections, with `circle` elements for the eyes and a `path` generated by the `d3.arc` function for the mouth. A group containing the rectangular eyebrows animates upward and downward via chained `transition` calls, each lasting two seconds. The example demonstrates importing `select` and `arc` from the D3 v7 library loaded via UNPKG.

PPranjali-Mohurle

95% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a simple cartoon face using D3.js, rendering a yellow circle with eyes, eyebrows, and a mouth in SVG. The face is drawn with basic shapes like circles, rectangles, and an arc path, all positioned relative to the center of the SVG. The eyebrows animate up and down using chained `transition()` calls with `duration(2000)`, moving the eyebrow group via its `transform` attribute. The code imports `select` and `arc` from D3 v7 and loads the library via UNPKG.

LLavinaThorat

95% match

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow SVG face with circular eyes, rectangular eyebrows, and an arc-shaped mouth is drawn using D3 selections and shape generators. The eyebrows animate upward and back down via chained `transition` calls that tween the group's `transform` attribute. The example imports `select` and `arc` from D3 v7 and renders entirely with SVG elements positioned around a centered group, with eyebrow motion driven by timed attribute updates.

Hharichandanamone21@gmail.com

94% match

Loading thumbnail…

Fork of Create a face with d3.js!

A smiling face is drawn with SVG shapes, including a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate upward and downward using D3's `transition()` method. The example uses D3 v7 APIs `select`, `arc`, and `attr` to build and style the elements within an SVG canvas.

Jjayanth1242

94% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a smiling face out of SVG shapes using D3.js v7, with a yellow circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code loads D3 from UNPKG and uses the `select` API to target the SVG element, then applies chained `transition` calls with a 2000-millisecond duration to animate the eyebrows up and down. The construction relies on D3's `arc` generator for the mouth path and explicit coordinate calculations for positioning features relative to the canvas center.

Hhelen azad

94% match

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow face rendered in SVG centers a circular head, two eyes, raised eyebrows, and a smile. Built with D3 v7, the code uses `d3.select` and `d3.arc` to construct the shapes. The eyebrows animate upward and back down over two seconds via chained `transition().duration()` calls. Static data values define positions and sizes for facial features.

44charan4

94% match

Loading thumbnail…

Fork of Create a face with d3.js!

A simple, animated face is drawn with yellow circular head, black-outlined features, and eyebrows that bounce over a two-second cycle. The example demonstrates basic D3.js v7 shape construction with SVG, using `circle`, `path`, and `g` elements, and applies a transition to the eyebrow group’s transform attribute. It imports `select` and `arc` from the `'d3'` module to select the SVG and compute the mouth path, with an arc helper defining the smile’s inner and outer radii and angles. The animation runs continuously without external data, relying entirely on generated geometry.

EEkansh Singh Rathore

94% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example draws a cheerful yellow face using SVG shapes, including circles for the eyes and an arc for the mouth. The eyebrows are rectangles that animate up and down via chained `transition()` calls with a 2000-millisecond duration. The code uses D3 v7, loaded from UNPKG, and imports `select` and `arc` from the `d3` module. All elements are centered within a 960x500 SVG using a group transformation.

LLohieth R

94% match