Skip to main content
SimilarExport ZIP
100%

BA 401 EXPERIMENT

✓ Published0🌍 Public
DDavidPal94
Last edited Apr 29, 2021
Created on Apr 29, 2021

A yellow smiley face animates its eyebrows in a looping motion against a blank background. Built with D3.js, the SVG circle face uses `svg.append` and `attr` to construct features, while `transition().duration()` cycles the eyebrow group’s vertical position twice. The mouth is drawn using the `arc` generator with specified inner and outer radii.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

BA 401 EXERCISE

A yellow smiley face with moving eyebrows demonstrates fundamental DOM manipulation using D3.js. The visualization is created with SVG elements, including circles for the face and eyes, rectangles for eyebrows, and a path for the mouth. D3 selections and the `arc` generator construct the face, while chained `transition` calls with `.duration(2000)` animate the eyebrows up and down. The source code is provided as an HTML file with a bundled JavaScript module.

DDebaliena
90% match
Loading thumbnail…

BA 401 EXERCISE

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face, including its red eyes and arc-shaped mouth, is drawn using SVG elements such as `circle` and `path`, with the mouth generated via the `d3.arc` function. Both eyebrows, implemented as `rect` elements, move upward and then return to their original position using chained `transition().duration()` calls over two seconds each. The code uses D3’s `select` API to manipulate the SVG directly, with all coordinates and sizes defined as constants.

DDebaliena
90% match
Loading thumbnail…

BA 401 Devendra Singh

A yellow smiley face drawn with SVG appears on screen, with two circular eyes, a curved mouth, and rectangular eyebrows. The visualization demonstrates fundamental DOM manipulation in D3.js by animating the eyebrows’ vertical position. Using D3 selections and chained transitions, the eyebrows move upward and return over repeated two-second intervals. The code builds the face from basic SVG shapes—circles, a path generated with `d3.arc`, and rectangles—while `transition().duration()` controls the animation timing. No external data is used; the rendering is purely programmatic.

Ddeven1998
88% match
Loading thumbnail…

Test1

A yellow smiley face is drawn with SVG circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The example demonstrates animated eyebrow movement using D3 transitions that lower and raise the rectangles over repeated two-second intervals. The scene is built with D3 selections to append and position elements, while the arc generator from the same library defines the mouth shape. The animation runs as an infinite loop, showcasing basic D3 transition chaining.

Bbillmccabeusa@hotmail.com
88% match
Loading thumbnail…

Smile

A smiling face drawn with SVG shapes animates its eyebrows in a playful blinking motion. The yellow circle face, black eyes, and curved mouth are constructed using D3's `arc` and basic SVG circle elements. Eyebrow movement is achieved through chained `transition().duration(200)` calls that shift the path's transform attribute up and down. The visualization uses D3 v6 and renders entirely in SVG with no external data source.

YYash Goyal
88% match
Loading thumbnail…

BA 401 Exercise

A smiley face drawn with SVG shapes uses the D3.js `select` and `arc` APIs for its geometry. The eyebrows, rendered as rectangles, animate upward and downward via chained `transition()` calls, while a red mouth path includes an `<animateMotion>` tag. The face is constructed from blue and red circles with a black stroke, and the animation loops indefinitely.

HHCR31
88% match
Loading thumbnail…

face

A yellow smiley face is centered in an SVG canvas, with two eyes, a mouth drawn using a D3 arc path, and rectangular eyebrows that animate upward and back down in a looping transition. Built with D3 v5, the example demonstrates fundamental DOM manipulation by selecting the SVG element, appending groups and shapes, and using chained `transition().duration()` calls to move the eyebrows via transform attributes.

EEbenizerR
88% match
Loading thumbnail…

Untitled

A yellow smiley face with black eyes and a curved mouth sits centered on a black background, while its rectangular eyebrows bounce up and down in a looping two-second animation. The example demonstrates fundamental DOM manipulation using D3.js v3, building the face from SVG shapes like circles, rectangles, and an arc path. The eyebrows move via chained `transition()` calls with a 2000-millisecond duration, toggling their vertical offset back and forth. All rendering is done through D3 selections and the `arc()` helper, with no external data source.

DDebaliena
87% match