Skip to main content
SimilarExport ZIP
100%

Fork of Create a face with d3.js!

✓ Published0🌍 Public
Ook-ey
Last edited Nov 22, 2023
Created on Nov 22, 2023

A stylized face built from SVG shapes animates its eyebrows in a looping motion. Circles form the head and eyes, rectangles become the eyebrows, and a path defined with `d3.arc` creates the mouth. The eyebrows move via chained `transition` calls that toggle their vertical position. The example uses D3 v7, loaded from UNPKG, and demonstrates imports from the `d3` module alongside local ES6 modules in a VizHub environment.

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!

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
95% match
Loading thumbnail…

Fork of Create a face with d3.js!

A yellow face drawn with D3.js SVG shapes animates its eyebrows in a looping motion. The example demonstrates modular JavaScript with `import` statements from `d3` and local modules, loading D3 v7 via UNPKG. It uses `select` and `attr` to construct circles and rectangles for the eyes and brows, and the `arc` generator to create the mouth path. A `transition` chain with a 2000-millisecond duration moves the eyebrows up and down continuously.

JJason
93% match
Loading thumbnail…

Fork of Create a face with d3.js!

A stylized face built from D3 shapes animates as its eyebrows shift. Using SVG primitives, the visualization constructs a yellow head with circular eyes, rectangular eyebrows, and a mouth drawn as an arc path. The code loads D3 v7 from UNPKG, uses the `select` and `arc` APIs, and chains `transition().duration()` calls to create a vertical eyebrow movement across two seconds.

Kkamleshkr01
93% 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
93% match
Loading thumbnail…

Fork of Create a face with d3.js!

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.

PPKISHON
92% 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
92% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a stylized cartoon face out of SVG shapes using D3 v7. It draws a yellow head, two eyes, rectangular eyebrows, and a mouth created with the `d3.arc` path generator. The eyebrows animate by chaining `transition` calls to move up and down repeatedly. The code demonstrates loading D3 from UNPKG, importing `select` and `arc` from the global D3 object, and structuring SVG elements with dynamic attribute calculations.

Eenckkipronoh@gmail.com
92% 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
91% match