Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
PPoojaThandra
Last edited Feb 20, 2023
Created on Feb 17, 2023

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.

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 Let's make a face with D3.js!

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.

PPoojithaPothini123
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation in D3.js by constructing a static smiley face and animating its facial features. The face is composed of SVG shapes, including circles for the head and eyes, arc-based paths for eyebrows and mouth, rectangles for the nose and teeth, all colored with pink, black, red, and white fills. The animation uses D3’s `.transition()` method to move the eyebrows vertically over two-second intervals, while the code employs `d3.select`, `d3.arc`, and SVG attribute setters to position every element relative to the canvas center.

SSharmaAshwini
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face with eyes, eyebrows, and a mouth. The code appends SVG circle and rectangle elements to a central group, then animates the eyebrows upward and back down using chained `transition` calls with a 2-second duration each. The mouth is drawn with the `d3.arc` generator using specified inner and outer radii and start/end angles. All elements are positioned via explicit pixel coordinates within a 960-by-500 SVG canvas.

RRealAlpha
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG shapes, including a red circle head, two eyes, and a mouth drawn with the `d3.arc` helper. The eyebrows, rendered as rectangles, animate upward and back down using D3’s `transition` method with a duration of 1000 and 2000 milliseconds. The code structures the scene by appending elements to a central `<g>` group, using constants for spacing and offsets to position facial features symmetrically. Built with d3.v5, it renders in an SVG container and relies on simple attribute chaining for styling and movement.

Ssmchaaritha@gmail.com
95% match
Loading thumbnail…

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

Built with D3 v5, this example demonstrates fundamental DOM manipulation and animation by constructing a smiley face from SVG shapes. The code uses `d3.select` to append a circle, eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down in a looping motion. All elements are centered within an SVG using a translated group, with dimensions pulled from the SVG attributes. The example highlights basic selections, attribute setting, and transition tweening without external data.

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

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

This example demonstrates basic DOM manipulation with D3.js by constructing a smiley face from SVG circles, rectangles, and an arc path. The face’s eyebrows animate up and down in a repeating two-second cycle using chained `transition().duration()` calls. Built with D3 v5, the code uses `select`, `arc`, and attribute setters to position facial features relative to the SVG center. The data is hardcoded via numeric constants for spacing and dimensions, and the animation runs continuously on page load.

PPranjali-Mohurle
95% match