Fork of Create a face with d3.js!

100%

Fork of Create a face with d3.js!

✓ Published0🌍 Public

Last edited Sep 21, 2023

Created on Sep 21, 2023

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.

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

96% match

Loading thumbnail…

Fork of Create a face with d3.js!

A cheerful yellow face built with SVG primitives in D3 v7. Circles form the head and eyes, rectangles serve as eyebrows, and the mouth uses d3.arc to create a curved path. The eyebrows animate upward and back down over two consecutive two-second transitions using d3.transition, while the static face remains centered on a 960×500 canvas.

SSilverOwl1112

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

95% match

Loading thumbnail…

Fork of Create a face with d3.js!

A yellow face rendered in SVG features animated eyebrows that shift upward and then return to their original position over repeated two-second transitions. The face is constructed from basic shapes including circles for the head and eyes, rectangles for the eyebrows, and an arc path for the smile. The code uses D3 v7, loading the library via UNPKG, and demonstrates selections, attribute manipulation, and chained `transition().duration()` calls to create the motion.

SSilverOwl1112

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!

This example creates a simple cartoon face using D3.js v7, rendered as SVG. It shows a yellow circle for the head, two eyes, animated eyebrows that move up and down using `transition().duration()`, and a frowning mouth drawn with the `arc()` shape generator. The code uses D3’s `select` to target the SVG element and demonstrates local ES6 module imports. The face is centered using dynamic width and height calculations, with eyebrows and eyes positioned via translations.

Kkumarak25

94% match

Loading thumbnail…

Fork of Fork of Create a face with d3.js!

A cartoon face built with D3.js draws a yellow circular head, eyes, and eyebrows on an SVG canvas. The code uses `d3.arc` to generate the mouth path and `d3.select` to manage elements. A `transition` with `.attr` animates the eyebrow group vertically in a looping up-and-down motion. The fixed layout positions features relative to the SVG’s center, with all styling applied via inline attributes.

SSilverOwl1112

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