Fork of Create a face with sad

100%

Fork of Create a face with sad

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

This example shows a stylized yellow face with eyes, eyebrows, and a sad mouth drawn as SVG shapes. The eyebrows animate upward and then back down over two seconds, creating a subtle emotional expression. The code uses D3 v7 selections and transitions, importing `select` and `arc` from the D3 module. The mouth is rendered using the `arc` generator with specified inner and outer radii and angles, while the SVG canvas is set to 960 by 500 pixels.

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 sadness

This example builds a stylized yellow face with sad eyebrows using D3 v7 and SVG. Circles form the eyes, while rectangles serve as eyebrows that animate up and down via chained `transition` calls. A path, generated with the `arc` function, creates a mouth shape. The visualization demonstrates importing D3 functions and rendering an animated, vector-based character.

Jjayanth1242

95% match

Loading thumbnail…

Fork of Fork of SAD

A yellow circle face with black eyes and animated eyebrows blinks periodically in an SVG. The example demonstrates D3 v7 selections and transitions, using `select` to target the SVG and `append` to build the face from circles, rectangles, and an arc-based mouth. Eyebrows move via chained `transition` calls with `duration`. The code imports `select` and `arc` from the D3 module loaded via UNPKG, rendering entirely in SVG.

Jjayanth1242

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

90% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example displays a yellow, cartoon-style face with a crying expression: large circular eyes, rectangular eyebrows, and an arc-shaped mouth drawn on an SVG canvas. Built with D3 v7, it uses `select` and `arc` to construct the facial features, while a chained `transition` animation repeatedly raises and lowers the eyebrows to simulate crying. The face is centered using an SVG group transform, and the code demonstrates local ES6 module imports alongside loading D3 via UNPKG.

AAkash Santosh Kuskar

89% match

Loading thumbnail…

Fork of SAD

This example animates a yellow, smiling face drawn entirely with SVG shapes, including circles for the eyes and head, rectangles for the eyebrows, and a path for the mouth. The eyebrows perform a repeated vertical bounce using D3’s transition system, which chains two 2-second movements to shift the eyebrow group down and back up. Built with D3 v7, the visualization loads the library from UNPKG and uses the `select`, `append`, and `arc` APIs to construct and animate the scene.

Jjayanth1242

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

88% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

A sad smiley face drawn entirely with SVG shapes demonstrates basic D3.js DOM manipulation and animation. The code uses `select` to target the SVG element and `append` to create a yellow circle, eyes, and rectangular eyebrows. A `transition().duration()` sequence moves the eyebrow group down and back, creating a repeated frowning motion. The mouth is generated using the `arc()` generator from D3's shape module with specified inner and outer radii and angle values.

UUpamanyu-ml

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

88% match