Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAmrit Adhikari
Last edited Sep 26, 2025
Created on Sep 26, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

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

A stylized yellow SVG face, built with D3.js, animates its eyebrows in a looping up-and-down motion. The face is constructed from basic shapes: a circle for the head, two circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth. The eyebrows move repeatedly via chained `transition().duration()` calls that translate their containing group. All elements are centered using SVG transforms, with dimensions derived from the SVG element’s height and width attributes.

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

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

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
95% match
Loading thumbnail…

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

A smiling face made of SVG shapes uses D3.js selections and transitions to animate its eyebrows. The code builds a yellow circle for the head, two eyes, and an arc-based mouth. D3's `transition()` and `attr()` methods move the eyebrow group up and down. The example demonstrates fundamental DOM manipulation with D3 v5, drawing shapes directly in an SVG element.

Ccaptind
95% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation and SVG rendering. The face is built from SVG circles, rectangles, and an arc-generated mouth path, centered within a fixed 960×500 viewport. Using D3 v5, the eyebrows transition vertically via chained `transition().duration()` calls, moving down 50 pixels and back over four seconds. The code imports `select` and `arc` from the D3 library, constructs the face with SVG shapes, and applies no external data—relying entirely on hardcoded geometric constants for positioning.

DDeclan Naughton
95% 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
95% 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
95% match