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

100%

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

✓ Published0🌍 Public

Last edited May 14, 2021

Created on May 14, 2021

Forked from Let's make a face with D3.js

A stylized, animated face rendered in SVG with D3.js v5. The face is built from primitive shapes—a yellow circle for the head, black circles for eyes, and an orange arc for a mouth—all centered within a 960x500 canvas. The animation is driven by D3's transition system, which moves the eyebrows upward and back over two seconds each. The code demonstrates modular imports from `d3`, including `select` and `arc`, and uses `arc()` to generate the mouth path with specified inner and outer radii and angular extents.

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 Fork of Let's make a face with D3.js

This example draws a cartoon face in SVG using D3 version 5. It builds the head, eyes, eyebrows, and mouth from primitive shapes, positioning them with coordinate math and an SVG transform. The code uses D3’s `select` to target the element, `arc` to generate the mouth path, and a chained `transition()` call to animate the eyebrows up and down over two seconds. A yellow circle, black eye circles, and gray eyebrow rectangles are styled via attributes.

Jjlspangl

95% match

Loading thumbnail…

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

This example builds a stylized yellow face from primitive SVG shapes—circles, rectangles, and an arc—using D3.js methods like `select`, `append`, and `attr`. The face is centered via a D3 selection transform, and its eyebrows animate vertically through chained transitions, first lowering and then returning to their original position. The arc for the mouth is generated with the D3 `arc` helper, while all shapes are drawn in an SVG container. Data is minimal, with hardcoded dimensions controlling eye spacing, radius, and eyebrow offsets.

IIc1200010

95% match

Loading thumbnail…

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

A yellow SVG face is drawn with D3.js v5, featuring two large eyes and an open mouth rendered as an arc path. The face uses `d3.select` and `d3.arc` to construct the shapes on an SVG canvas. The code includes a commented-out animated eyebrow section that would use `transition` to move eyebrows up and down, though the active version shows only static features. All elements are positioned using SVG transform attributes, with the face centered on a 960×500 viewport.

Jjlspangl

95% match

Loading thumbnail…

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

A D3.js face is drawn with SVG shapes, featuring black circular eyes, a red mouth created with an arc generator, and eyebrows rendered as rectangles. The animated eyebrows shift downward and return via chained `transition()...duration()` calls, demonstrating movement within the SVG canvas. Built with D3 v6 selections, the code uses `d3.arc()` for the mouth path and manipulates SVG attributes like `cx`, `r`, and `transform` to position elements relative to the viewport center.

AAvonlea Fisher

94% match

Loading thumbnail…

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

A smiling cartoon face is drawn with SVG shapes, including a yellow circle for the head, black circles for eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate upward and back downward over four seconds using chained D3 transitions. The code uses d3-selection to append elements to an SVG canvas and d3-shape’s `arc()` function to generate the mouth path. The face is centered via a group transformation, with eye spacing and offsets defined as constants.

AAdam Usmani

94% match

Loading thumbnail…

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

A friendly face built from SVG shapes—yellow circle head, black eyes, eyebrows, and an arc mouth—is centered in a 960×500 viewport. Using D3 v6, the visualization animates the eyebrows downward and back upward over two seconds via chained `transition()` calls on a `<g>` group. The code constructs shapes with primitive SVG elements and a D3 arc generator for the mouth, demonstrating basic selection, attribute binding, and transform animation without external data.

Yyingzhe-z

94% match

Loading thumbnail…

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

A D3.js v5 example constructs a smiling face entirely from SVG shapes, including a circle head, eyes, and an arc-based mouth. The animation focuses on the eyebrows, which move up and down via a chained `transition().duration(2000)` call, demonstrating fundamental DOM manipulation. The code uses D3's `select` to target the SVG element and `arc` to generate the mouth's path, with all facial features positioned relative to the canvas center via SVG group translations.

Mmd-Junaid

94% match

Loading thumbnail…

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

A yellow circle face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in an SVG. The eyebrows transition up and down repeatedly using D3 `.transition().duration()`. The code constructs the face with d3-selection and d3-arc, positioning elements via SVG transforms. The mouth path is generated using `arc()` with inner and outer radii, while eye and brow shapes are drawn as SVG circles and rectangles on a 960x500 canvas.

DDINESHSAIBOPPANA7

94% match