Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
AAmandineM97
Last edited Apr 13, 2022
Created on Apr 13, 2022

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face with animated eyebrows. A yellow circle forms the head, with two eyes and a mouth drawn using an arc path. The eyebrows—rendered as rectangles—move up and down through a chained `transition().duration(2000)` sequence, shifting the transform attribute over time. The code uses D3 v5 selection methods like `append` and `attr`, plus the `arc` generator from the `d3` module, all rendered as SVG elements.

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 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
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!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3 v5. Using SVG shapes, the code draws a circle for the face, two circles for eyes, and rectangles for eyebrows, while an arc generator creates the mouth. The eyebrows move vertically through chained `transition().duration()` calls, and the entire face is centered using an SVG `g` transform. This example focuses on core D3 selections and transitions.

LLG0498
97% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face whose eyebrows move up and down in a looping animation. The visualization uses SVG elements—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—centered within a 960×500 viewport. The code leverages D3 v5 selections, the `arc` generator for the mouth shape, and chained `transition().duration(2000)` calls to animate the eyebrow group’s vertical position. The face is static except for the eyebrows, showcasing how D3 binds data to visual properties.

Jjunior-armando
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!

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation in D3. The code uses d3.select and append to build SVG circles for the face and eyes, rectangles for eyebrows, and a d3.arc-generated path for the mouth. An eyebrow group animates via chained transition and duration calls, shifting its translate transform up and down over two seconds. The example uses D3 v5 with a declarative selection-based approach, rendering entirely in SVG.

Nnamkhang0807@gmail.com
97% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental D3.js DOM manipulation. The face is drawn using SVG circles for the eyes, rectangles for the eyebrows, and a d3.arc() path for the mouth, all centered within an SVG canvas. The eyebrows move up and down repeatedly through chained transition().duration() calls that change their transform attribute. The example uses d3.select and d3.arc from the d3 v5 library to construct and animate the static SVG elements.

JJorrr2
97% match