Fork of Create a face with d3.js!

100%

Fork of Create a face with d3.js!

✓ Published0🌍 Public

Last edited Sep 23, 2023

Created on Sep 23, 2023

This example draws a smiling yellow face with d3, featuring eyes, animated eyebrows, and an arc-based mouth. The SVG is centered within a 960x500 viewport, with all facial features positioned relative to the center using SVG transforms. The code uses d3’s `select` and `arc` functions, and demonstrates transitions by moving the eyebrows up and down over two-second intervals. No external data is loaded; the rendering is purely geometric, built from circles, rectangles, and a path.

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!

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

96% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example draws a yellow smiley face in SVG using D3 v7, centered within a 960×500 canvas. It constructs the face from primitive shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all positioned using transforms and hardcoded coordinates. The code employs D3’s `select` and `arc` helpers, and animates the eyebrows by chaining two `transition().duration(2000)` calls that shift the eyebrow group vertically over four seconds. The rendering is purely SVG, with no external data source.

LLavinaThorat

95% match

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow smiley face is drawn in SVG with circular eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate up and down via chained `transition` calls on a `g` element. Built with D3 v7, the visualization uses `select`, `attr`, and `arc` from the D3 library, with coordinates computed relative to the SVG’s center. The face is rendered on a 960×500 canvas using hard-coded dimensions and no external data source.

LLohieth R

95% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a smiling yellow face in SVG using D3 v7. The code selects an SVG element and uses D3’s `arc` generator to create a mouth path, while circles and rectangles form the eyes and eyebrows. The eyebrows animate upward and back down via chained `transition().duration()` calls. Dimensions for facial features are defined as constants, and the face is centered using a group transform.

LLavinaThorat

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

95% 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!

This example shows a yellow smiley face drawn in SVG using D3.js, with its eyebrows animating up and down in a repeating cycle. The face is assembled from circles, rectangles, and a path created with D3’s `arc()` helper, all positioned within a centered `<g>` group. The code uses D3 v7, loaded via UNPKG, and demonstrates `import` of `select` and `arc` from the D3 module. Eyebrow motion is achieved with chained `transition().duration()` calls that alternate the group’s transform attribute.

Ssolution365

94% match

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow SVG face with black-outlined eyes, eyebrows, and a smile is centered in a 960×500 viewport. D3 v7 draws the circular head and features using `selection.attr` and the `arc` generator for the mouth. The eyebrows animate vertically through chained `transition` calls with `duration(2000)`, moving down 50 pixels and back, demonstrating two-way motion sequencing.

SSilverOwl1112

94% match