Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
LLikhithaBodepudi@my.unt.edu
Last edited Feb 28, 2024
Created on Feb 28, 2024

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow rectangular face with eyes, eyebrows, and a mouth. The eyebrows animate upward and downward using chained `transition()` calls with a 2-second duration. The code imports `select` and `rect` from D3 v5, appends SVG shapes via method chaining, and uses an `arc()` path from D3 to render the mouth. A static SVG canvas of 960×500 pixels serves as the rendering surface, with all elements positioned relative to the center of the viewport.

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!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows, rendered as rectangles, animate upward and then back down through chained `transition().duration()` calls. The code imports `select` and `arc` from D3 v5, uses SVG elements for rendering, and relies on data-driven attributes to position features relative to the viewport dimensions.

RRadhika Ganapathy
95% match
Loading thumbnail…

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

A yellow circle face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in an SVG. The eyebrows transition up and down repeatedly using D3 `.transition().duration()`. The code constructs the face with d3-selection and d3-arc, positioning elements via SVG transforms. The mouth path is generated using `arc()` with inner and outer radii, while eye and brow shapes are drawn as SVG circles and rectangles on a 960x500 canvas.

DDINESHSAIBOPPANA7
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face with animated eyebrows. The face is built using SVG shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. Eyebrows are rendered as rectangles and animated using chained `transition` calls with `duration` to move them up and back down. The code imports `select` and `arc` from the D3 v5 library, and positions elements relative to the SVG’s center using attribute setters and transform strings.

CColten Appleby
95% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes. A yellow circle, two eyes, a mouth drawn using the `d3.arc` function, and rectangular eyebrows are all appended to an SVG container. The eyebrows animate by moving up and down through a chained `transition` with `attr` changes, using a two-second duration for each movement. The code uses D3 v5’s `select` and `arc` methods, with the animation running once on load.

Llerik03
94% match
Loading thumbnail…

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

This example shows a yellow face built with D3.js v5, rendered as animated SVG elements. A circle forms the head, two circles create the eyes, and an arc generates the mouth. The eyebrows, drawn as rectangles, animate upward and then back down using chained `transition` calls with a two-second duration. All shapes are positioned within a centered group using SVG transformations. The code imports `select` and `arc` from D3, and reads the SVG dimensions from the DOM attributes to set the layout dynamically.

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

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

This example uses D3.js v5 to build a simple animated smiley face from basic SVG shapes—a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and downward through chained `transition` calls, each lasting 2 seconds. It demonstrates fundamental DOM manipulation with `select` and `append`, and uses SVG attributes like `cx`, `r`, and `transform` to position elements relative to a centered group.

Rradhadevarapu
94% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG shapes, including a yellow circle head, eyes, a line nose, and an arc mouth. The code animates the eyebrows using chained `transition().duration()` calls, moving them upward and back down over two seconds. It uses D3 v5’s `select` to target the SVG element and `arc` to generate the mouth path, with all elements appended to a centered group. The rendering relies entirely on SVG and animation, with no external data source.

Mmivan000
94% match