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

100%

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

✓ Published0🌍 Public

Last edited Oct 9, 2023

Created on Oct 9, 2023

Forked from Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives—a yellow circle, two eyes, eyebrows, and a mouth—and animating the eyebrows through a two-stage transition. The code uses D3 v5’s `select`, `append`, and `attr` methods to build the SVG structure, while the `transition().duration(2000)` API moves the eyebrow group vertically in a looping sequence. The mouth is drawn with the `arc` shape generator, and static layout parameters such as `eyeSpacing` and `eyebrowYOffset` control facial proportions.

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 building a smiley face with animated eyebrows. The face is constructed using SVG elements, including a yellow circle for the head, two circles for eyes, and an arc-generated mouth. The eyebrows, rendered as rectangles, move up and down using chained `transition().duration()` calls to create a looping animation. The code uses D3 v5’s `select`, `arc`, and transition APIs to handle element creation and animation.

DDanyalMazhar

97% 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

97% 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 primitives, including a yellow circle head, eyes, and a mouth arc. The animation shows the eyebrows moving up and down repeatedly by chaining `transition().duration()` calls on the eyebrow group, which translate vertically. The code builds the face using `d3.select`, `svg.append`, and `d3.arc` to generate the mouth path, with all elements arranged via absolute coordinates. The animation runs automatically on load, cycling the eyebrow position every two seconds.

Mminpugithub

97% 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

97% match

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing an animated smiley face. It shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows move up and down in a looping transition. The code uses d3-selection to append SVG elements and d3-transition to animate the eyebrow group’s transform attribute. An arc generator from d3-shape creates the mouth path. All geometry is defined with hardcoded constants, rendering entirely as SVG.

Rrahool001

97% match

Loading thumbnail…

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

This example demonstrates fundamental D3.js DOM manipulation by building a yellow smiley face with animated eyebrows. The code uses D3 v5 selections to append SVG circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered via a transformed group. The eyebrows transition vertically over two 2-second intervals using chained `transition().duration()` calls, moving up and then back down. The visualization showcases how D3 can create and animate geometric shapes through declarative SVG attribute setting.

AApril Fangzhu Guo

97% match

Loading thumbnail…

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

This example builds a smiley face out of SVG shapes—a yellow circle, two eyes, and a mouth drawn with `d3.arc()`—and animates its rectangular eyebrows by chaining two `transition().duration()` calls. The code selects the SVG element with `d3.select`, appends a group for centering, and transitions the eyebrow container between two vertical offsets, creating a bobbing motion. It demonstrates fundamental DOM manipulation and chained transitions using D3 v5 without external data.

Ddhanushkar006

97% 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. A yellow circle forms the head, with black circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate upward and downward via chained `transition().duration()` calls, moving their containing group’s `transform` attribute over two seconds. The code uses D3 selections, `attr()`, and `append()` to construct elements, alongside the `arc()` generator from D3’s shape module.

HHojjat Karami

97% match