Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
JJyothicherukuri
Last edited Feb 19, 2022
Created on Feb 19, 2022

This example creates an animated smiley face using D3.js v5. The visualization renders a yellow circle head with eyes, eyebrows, and a mouth as SVG elements. The eyebrows animate by moving up and down over two seconds using D3's transition system. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending shapes with attributes like position and fill color. It also uses D3's arc function to generate a path for the mouth.

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 shows a yellow smiley face built entirely with D3.js v5, featuring two eyes and a curved mouth drawn with an arc path. The face’s eyebrows, rendered as rectangles, animate up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 selections to append SVG elements, `d3.arc` for the mouth, and attribute manipulation to position the facial features relative to the SVG's center. All rendering occurs in an inline SVG with CSS hiding page overflow.

JJenifer Vivar
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 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
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
96% 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
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
Loading thumbnail…

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

This visualization demonstrates basic D3.js DOM manipulation by rendering an animated smiley face. The code builds a yellow circle for the head, adds two circular eyes, and animates rectangular eyebrows upward and downward using chained `transition()` calls. A mouth is drawn using an `arc()` path generator. The example uses D3 v5 to select SVG elements, set attributes like fill and stroke, and apply timed transforms, all rendered as an SVG animation.

Ssalwa191
96% match
Loading thumbnail…

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

This example uses D3.js v5 to animate a smiley face built entirely from SVG shapes. It shows a yellow circle with two eyes, animated eyebrows that move up and down repeatedly, and a mouth drawn as an arc. The code manipulates the DOM directly, using `d3.select` to target the SVG element and `append` to add each facial feature. The eyebrow animation is achieved through chained `transition` calls that alternate the transform attribute, while the mouth’s curved path is generated with the `d3.arc` function.

RRamola Shishupal
96% match