Fork of Create a face with d3.js!

100%

Fork of Create a face with d3.js!

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

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.

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

LLohieth R

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

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

95% match

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 cartoon face out of basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth—all drawn with D3 selections. The layout is computed from the SVG dimensions and centered with a transform. It demonstrates importing `select` and `arc` from the d3 module and uses chained `transition().duration(2000)` calls to animate the eyebrows moving up and down. The page loads D3 v7 from UNPKG and renders to a static SVG element.

MMatias Conde

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

94% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a cartoon face out of basic SVG shapes—a yellow circle for the head, circles for eyes, rectangles for eyebrows, and a d3.arc-generated path for the mouth. The code uses d3-selection to append elements and d3-transition to animate the eyebrows upward and back down over a two-second cycle. The face is centered within a 960×500 SVG canvas, with the d3 library loaded via UNPKG.

LLavinaThorat

94% match