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

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.

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

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

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

92% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example uses D3.js v7 to construct a simple yellow face from SVG shapes, including circles for the eyes and rectangles for the eyebrows. The code imports `select` and `arc` from the D3 library, though `arc` is unused, and sets the face against a fixed 960×500 canvas. A chained `transition().duration(2000)` animation moves the eyebrow group up and down, creating a blinking or raising effect. The SVG elements are positioned relative to the center of the canvas using a translated group.

SSilverOwl1112

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

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

91% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example shows a cartoon face constructed with D3.js v7, featuring a yellow head, eyes, eyebrows, and an arc-based mouth. The face is centered in a 960x500 SVG canvas using data-driven attributes for positioning. D3 transitions animate the eyebrows 50 pixels upward for two seconds, then back down. The code imports `select` and `arc` from the D3 library, loads D3 via UNPKG, and builds the shape using SVG circles, rectangles, and a path with `d3.arc()`.

HHarish.G

91% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example draws a cartoon face in an SVG canvas using D3 v7, with a yellow circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code imports `select` and `arc` from D3 and constructs the face programmatically, centering it in a 960×500 viewport. The eyebrows are animated with chained `transition().duration(2000)` calls that move them downward and then back to their original position. The face is static apart from this repeating eyebrow movement, which demonstrates D3’s SVG rendering and transition API.

PPKISHON

91% match