Skip to main content
SimilarExport ZIP
100%

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

✓ Published2🌍 Public
VVishakha Routra
Last edited Feb 4, 2026
Created on Feb 4, 2026

This example shows a stylized yellow face built entirely with D3.js v5 SVG shapes. A circle forms the head, two circles serve as eyes, rectangles act as eyebrows, and a path created with the `d3.arc` function renders the mouth. The eyebrows animate up and down using chained `transition` calls, each lasting two seconds. The face is centered on a 960×500 SVG canvas using a group element with a translation transform.

AI-generated description
MIT Licensed

Similar vizzes

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

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

This example builds a smiling yellow face using D3.js v5, drawing the head, eyes, and mouth as SVG shapes positioned with a centered group transform. The code uses `d3.select`, `d3.arc` for the mouth path, and property setters like `attr` for circles and rectangles. A chained `transition` with a 2-second duration animates the eyebrows upward and back down, creating a repeated eyebrow-raising motion. The face is rendered entirely with SVG elements, with no external data source, and uses a fixed 960×500 viewport.

VVishakha Routra
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 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.

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

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

A yellow circle with black outlines becomes a cartoon face, complete with eyes, eyebrows, and a curved mouth. The eyebrows animate downward and back upward over two seconds each, repeating the motion. Built with D3 v5, the SVG is rendered using `select`, `arc`, and `transition` calls, with circles for eyes and a path generated by `d3.arc` for the mouth.

Ddr_nareshvet@yahoo.in
94% match
Loading thumbnail…

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

A yellow circle with black outlines becomes a cartoon face, complete with eyes, eyebrows, and a curved mouth. The eyebrows animate downward and back upward over two seconds each, repeating the motion. Built with D3 v5, the SVG is rendered using `select`, `arc`, and `transition` calls, with circles for eyes and a path generated by `d3.arc` for the mouth.

Ddr_nareshvet@yahoo.in
94% match