Skip to main content
SimilarExport ZIP
100%

Fork of Create a face with d3.js!

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

This example demonstrates how D3.js can construct a cartoon face using SVG shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. The face is centered via an SVG `g` element, and the eyebrows animate vertically using chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v7, loads data from local variables, and renders entirely through SVG attributes and transitions.

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

A cartoon face built with SVG circles, rectangles, and an arc path animates its eyebrows up and down. The example loads D3 v7 from UNPKG and demonstrates modular imports of `select` and `arc` from the D3 library. Eyebrows transition vertically using chained `transition().duration()` calls, while the face is centered via SVG group transforms on a 960×500 canvas.

Rrohitchavan007
94% 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
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 creates a cheerful cartoon face using D3.js, with animated eyebrows that move up and down over a two-second cycle. The face is drawn with SVG shapes, including circles for the eyes, rectangles for the eyebrows, and a path generated using the `arc()` API for the mouth. The code demonstrates importing `select` and `arc` from the D3 v7 library and chains `transition().duration()` calls to animate the eyebrow position. All elements are centered within an SVG canvas using a group transform.

IIrfan Qureshi
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, 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
93% match