Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
PPoojithaPothini123
Last edited Feb 22, 2023
Created on Feb 22, 2023

A smiley face built with D3.js animates its eyebrows in a continuous up-and-down cycle. The code constructs the face from SVG shapes, using `d3.arc` for the mouth and appended circles and rectangles for the eyes and brows. Two chained `transition` calls, each lasting two seconds, shift the eyebrow group’s transform attribute to create the motion. The example demonstrates basic DOM manipulation and animation in D3 v5, rendering entirely with SVG elements on a 960×500 canvas.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

A smiling face built from basic SVG shapes animates its eyebrows up and down in a continuous loop. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` and `append` to create circles, rectangles, and an arc path for the mouth. Two chained `transition().duration()` calls move the eyebrow group between two vertical positions. The face is centered within an SVG canvas using an affine transform, with all geometry defined by explicit numeric constants.

PPoojithaPothini123
97% match
Loading thumbnail…

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

A smiling face built from basic SVG shapes animates its eyebrows up and down in a continuous loop. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` and `append` to create circles, rectangles, and an arc path for the mouth. Two chained `transition().duration()` calls move the eyebrow group between two vertical positions. The face is centered within an SVG canvas using an affine transform, with all geometry defined by explicit numeric constants.

PPoojithaPothini123
97% match
Loading thumbnail…

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

A smiley face built with D3.js displays animated eyebrows that shift upward and downward in a looping two-second transition. The code selects an SVG element and constructs the face using D3 selections, appending circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `d3.arc` API for the mouth. Eyebrow movement is driven by chained `transition().duration()` calls that alternate the group's transform offset. The example uses D3 v5 with SVG rendering and demonstrates basic DOM manipulation and animation for static, predefined geometry without external data.

Ssrinivasaraosankula
95% match
Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a repeated rise-and-fall motion. The example demonstrates fundamental DOM manipulation by building the face from SVG elements—circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` helper for the mouth. Eyebrow movement uses chained `transition().duration()` calls to shift the group’s `transform` attribute, alternating between raised and lowered positions. The code imports `select` and `arc` from D3 v5 and renders entirely in SVG on a 960×500 canvas.

Ppavakpatel
95% match
Loading thumbnail…

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

This example builds a smiley face with D3.js v5, demonstrating fundamental DOM manipulation through SVG shapes and animated transitions. A red circle forms the head, with eyes, eyebrows, and a mouth added as separate SVG elements. The eyebrows are rectangles that move up and down via chained `transition().duration(2000)` calls, creating a simple animation loop. The code uses D3’s `select`, `arc`, and transition methods to append and animate elements, with positioning handled through explicit `attr` coordinates.

PPoojaThandra
95% match
Loading thumbnail…

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

A smiley face composed of SVG shapes animates its eyebrows in a looping sequence. The code builds the face using D3 selections, appending circles for the head and eyes, rectangles for brows, and a path from `d3.arc` for the mouth. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the group’s `transform` attribute between two positions. The example demonstrates fundamental DOM manipulation and animation with D3 v5.

SSai Kaushik
95% match
Loading thumbnail…

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

A smiley face drawn with D3.js animates its eyebrows in a looping vertical motion, demonstrating fundamental DOM manipulation. The visualization constructs the face using SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` for the mouth. Coordinates are centered via a translated `<g>` element, and the eyebrow movement is driven by chained `transition` calls that shift the group’s `transform` attribute over 2-second intervals. The code relies on D3 v5’s `select`, `attr`, and `transition` APIs, with a fixed viewport defined in the HTML.

NNeil Chen
95% match
Loading thumbnail…

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

A smiley face built with D3.js animates by repeatedly moving its eyebrows up and down. The SVG canvas contains a red circle for the head, two smaller circles for eyes, and a path drawn with the `d3.arc()` function for the mouth. The animation uses chained `transition()` calls with a 2000-millisecond duration to shift the eyebrow group’s `transform` attribute. All shapes are appended and styled programmatically via D3’s selection methods, with dimensions derived from the SVG’s width and height attributes.

KKishoreKumar
95% match