Skip to main content
SimilarExport ZIP
100%

Fork of Create a face with d3.js!

✓ Published0🌍 Public
SSilverOwl1112
Last edited Sep 22, 2023
Created on Sep 22, 2023

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.

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

A yellow SVG face with eyes, animated eyebrows, and an arc-shaped mouth is rendered in the center of a 960×500 viewport. The example demonstrates how to compose primitive shapes with D3 selections and apply a chained transition to move the eyebrow group vertically over two seconds, then return it. It uses `d3.select`, `d3.arc`, and `transition.attr` on SVG elements, with D3 v7 loaded from UNPKG and a local ES6 module importing `select` and `arc`.

SSilverOwl1112
95% match
Loading thumbnail…

Fork of Create a face with d3.js!

A yellow SVG face with circular eyes, rectangular eyebrows, and an arc-shaped mouth is drawn using D3 selections and shape generators. The eyebrows animate upward and back down via chained `transition` calls that tween the group's `transform` attribute. The example imports `select` and `arc` from D3 v7 and renders entirely with SVG elements positioned around a centered group, with eyebrow motion driven by timed attribute updates.

Hharichandanamone21@gmail.com
95% 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
95% 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
95% 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
95% 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
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