Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TTarul170720
Last edited Dec 9, 2021
Created on Dec 9, 2021

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face with eyes, eyebrows, and a mouth. The eyebrows animate by alternating their vertical position via chained `transition().duration()` calls, moving up and then back down. The code uses `d3.select` and `d3.arc` to create SVG shapes, with coordinates calculated from the viewport dimensions. All elements are appended to a centered `<g>` group, and the animation runs continuously without user interaction.

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 builds a yellow smiley face with D3.js, featuring two eyes, a mouth drawn with the `d3.arc` path generator, and eyebrows that animate vertically via chained `transition().attr()` calls over two-second intervals. The face is centered using an SVG `g` element transformed to the viewport’s midpoint, with all shapes positioned relative to that origin. The code uses D3 v5 selections and transitions to demonstrate fundamental DOM manipulation and SVG attribute updates, rendering the animation entirely in the browser.

KKeerthipriyaBankuru
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 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
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 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
96% 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 smiley face with yellow circular head, black-outlined eyes, and an arc-based mouth. Animation brings the face to life as the eyebrows, drawn as rectangles, move upward and downward through chained `transition().duration(2000)` calls on the group element containing them. The visualization uses D3 v7 with SVG output, constructing the face within a centered `<g>` group and positioning features relative to the viewport dimensions. The code explicitly imports `select` and `arc` from the D3 library, with the mouth path generated using `d3.arc()` with specified inner and outer radii and angle bounds.

Ddok0086m
96% 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 whose eyebrows animate up and down. The code uses d3.select, d3.append, and d3.attr to construct SVG shapes including circles, rectangles, and an arc-based mouth. A d3.transition with a 2000-millisecond duration cycles the eyebrow group’s translate transform between two vertical positions, creating a looping motion. The page loads d3.v5 from a CDN and renders entirely in SVG with no external data source.

Nnshedd
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 shows a yellow smiley face with eyes, eyebrows, and a mouth, built using D3.js v5. The face elements are drawn as SVG shapes, with the mouth created using the `arc` function. The eyebrows, rendered as rectangles, animate vertically through chained `transition` calls, moving up and then returning to their original position over two seconds. The code uses D3 selections and attribute manipulation to construct and transform the visual components.

Ssabaliaqat786
96% match