Fork of Lets make a face

100%

Fork of Lets make a face

✓ Published1🌍 Public

Last edited Feb 23, 2021

Created on Feb 23, 2021

This example shows a simple yellow cartoon face with eyes, eyebrows, and a mouth, built entirely with D3.js v6 and rendered as SVG. The eyebrows animate by moving up and down repeatedly over two-second transitions. The face is centered using a group translation, and the mouth is drawn with the `d3.arc` path generator. The code uses `select` and `arc` from the D3 library, with hardcoded dimensions for spacing and radius, displaying a looping motion without any external data source.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Lets make a face

A yellow face with black outlines is drawn on an SVG canvas using D3 v6. The animated eyebrows move up and down via chained `transition().duration()` calls. The face is constructed from primitive shapes: circles for the head and eyes, and a path generated with the `arc()` API for the mouth. The code imports `select` and `arc` directly from D3.

EEsteLima

95% match

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

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

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

94% match

Loading thumbnail…

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

A yellow cartoon face rendered with SVG shapes animates its eyebrows up and down. The code builds the face from concentric circles for the head, eyes, and mouth using D3 selections and an arc generator. D3 transitions with a two-second duration repeatedly move the eyebrow group vertically, creating a looping expression. The example is implemented with D3 v5, drawing directly to an SVG canvas within a 960 by 500 pixel viewport.

AAmrit Adhikari

94% match

Loading thumbnail…

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

A cheerful yellow face is drawn in SVG and animated with D3.js v7. The face features a circular head, two eyes, and rectangular eyebrows that move up and down over two seconds. The mouth is rendered as an arc path using the `arc()` method, which defines its inner and outer radii and angular range. The code uses `select` to target the SVG element, `append` to build the grouped shapes, and `transition().duration()` to animate the eyebrow group’s transform, demonstrating basic D3 animation and SVG construction.

FFarhodXoliyarov

94% match

Loading thumbnail…

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

A yellow circle face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v6. The mouth is generated with the `arc` generator, while the eyes and eyebrows are circles and rectangles. Eyebrows animate vertically via chained `transition().duration()` calls, moving down and then back up, using D3's selection and transition methods.

SSerena Fang

94% match

Loading thumbnail…

Fork of Lets make a face with D3 js!

This example animates a simple cartoon face made of SVG shapes, including a yellow circle head, eyes, eyebrows, and a mouth drawn with an arc. The eyebrows move up and down repeatedly using chained D3 transitions that modify their transform attribute over two-second intervals. The visualization uses D3 v6 selection methods like `select` and `append`, along with the `arc` generator for the mouth path, all rendered inside a React project on a 960×500 SVG canvas.

KK V VINITHA

94% match