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 Mar 2, 2023

Created on Mar 2, 2023

Forked from 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 animate upward and downward. The face is built entirely with SVG shapes—circles for the eyes and face, rectangles for eyebrows, and a path using `d3.arc()` for the mouth. The animation is driven by chained `transition().duration()` calls on the eyebrow group, moving it vertically between two offsets. D3’s `select` and `attr` methods position all elements relative to the SVG’s center, with no external data source.

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 rendering a yellow smiley face with animated eyebrows. The face is drawn using SVG shapes—circles for the eyes, rectangles for the eyebrows, and a path generated with `d3.arc()` for the mouth—all positioned within a group centered on an SVG canvas. The eyebrows move via chained `transition()` calls with specified durations, shifting their vertical position to create a raising effect. The code imports `select` and `arc` directly from the d3 module and uses attribute chaining to build the visualization.

SSravaniPosina

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 animate upward and downward in a continuous loop. The SVG face is constructed using D3’s `select` and `append` methods to create circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows’ motion is achieved through chained `transition().duration(2000)` calls, which toggle the `transform` attribute between two vertical offsets. The code relies on D3 v5 and uses raw SVG attributes for positioning and styling.

Jjlspangl

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

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!

A yellow smiley face is drawn in an SVG canvas, with animated eyebrows that move up and down repeatedly. The example demonstrates fundamental DOM manipulation with D3.js, using a simple data-free composition of SVG shapes: circles for the face and eyes, rectangles for eyebrows, and a path created with the `d3.arc` generator for the mouth. D3's `transition` method triggers the eyebrow animation, while the `select` and `append` APIs build the hierarchical SVG structure centered on the canvas.

AAsimali39

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