Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
VVishakha Routra
Last edited Jan 30, 2026
Created on Jan 30, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and chained transitions: the eyebrows animate upward and back down over four seconds via `transition.attr` calls on a `g` element. Rendered in a 960×500 SVG, the face is centered using a translated group, with dimensions for features like eye spacing and eyebrow width defined as variables. No external data is used; the visualization relies solely on hardcoded geometry and D3’s selection and arc APIs.

Ccraig harbottle
97% match
Loading thumbnail…

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

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, black circles for eyes, a curved path for the mouth, and rectangular eyebrows. The eyebrows animate by transitioning the eyebrow group’s translate attribute in two successive two-second intervals, moving them upward and then back down. The code uses D3’s `select`, `arc`, and `transition` APIs, and renders everything to SVG within a fixed 960×500 viewport. No external data is loaded; all geometry is defined directly in the script.

Ssandeepss2020
96% match
Loading thumbnail…

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

A smiling face built with SVG shapes demonstrates fundamental DOM manipulation using D3.js v5. The code constructs a yellow circle head, two eyes, and a mouth arc using the `d3.select`, `d3.arc`, and `d3.transition` APIs. The eyebrows, drawn as rectangles, animate vertically via chained `transition().duration()` calls, moving up and then back down over 2.8 seconds. All elements are positioned relative to the SVG's center using `transform` attributes.

BBobViz
96% match
Loading thumbnail…

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

This example builds a yellow smiley face with D3.js and animates its eyebrows upward in a repeating two-second cycle. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition` calls to move the eyebrow group’s `transform` attribute. Circles form the eyes and a yellow circle with a black stroke forms the head, all rendered in SVG. The animation demonstrates basic DOM manipulation and timed transitions with D3 v5.

CChromosin13
96% match
Loading thumbnail…

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

This example shows a yellow smiley face built from basic D3.js shapes, with animated eyebrows that move upward and then return to their original position. The face is constructed using SVG circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The code uses D3 v5 selections, attribute manipulation, and chained `transition` calls with explicit durations to drive the eyebrow animation on a fixed 960×500 canvas.

Nnamesh singh
96% match
Loading thumbnail…

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

A smiling face with yellow circular head, black-outlined eyes, and a curved mouth is rendered as SVG using D3 selections. The code builds the face by appending circles, rectangles, and an arc path to a centered group element. Eyebrows animate upward and back down via chained `transition.attr` calls over two-second intervals. The example uses `d3.select`, `d3.arc`, and SVG attribute manipulation to demonstrate fundamental DOM binding and transitions in D3 v5.

Mmatthewtang89@gmail.com
96% match
Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa
96% match
Loading thumbnail…

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

This example uses D3.js v5 to build a yellow smiley face with animated eyebrows. It starts by appending SVG elements—circles for the face and eyes, rectangles for eyebrows, and a path for the mouth—transformed to center the drawing. The eyebrows repeat a two-second transition sequence that moves them upward and back down via `transition.attr()`. The code imports `select` and `arc` from D3 to construct the mouth shape, relying on static coordinates and no external data.

Jjit-bose-10
96% match