Fork of Create a face with d3.js!

100%

Fork of Create a face with d3.js!

✓ Published0🌍 Public

Last edited Oct 5, 2023

Created on Oct 5, 2023

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.

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

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

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 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 Fork of Create a face with d3.js!

A yellow smiley face rendered in SVG with D3.js v7 shows animated eyebrows that bounce up and down. The face is built from basic shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. D3 transitions animate the eyebrow group's transform over two-second intervals, while the geometry is positioned using translation and explicit pixel offsets. The code demonstrates modular imports from the d3 package, specifically `select` and `arc`.

HHarish.G

95% match

Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa

95% match

Loading thumbnail…

Fork of Create a face with d3.js

This example shows a smiley face drawn with D3.js v7 SVG primitives, including a yellow circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The face is centered using a group transformation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` tweening. The code imports `select` and `arc` from D3 and loads the library via UNPKG, demonstrating local ES6 module imports and dynamic SVG attribute updates in a VizHub environment.

KkarthikGT

94% match