Skip to main content
SimilarExport ZIP
100%

BA 401 Exercise

✓ Published0🌍 Public
HHCR31
Last edited May 6, 2021
Created on Apr 29, 2021

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.

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

BA401 EXERCISE$

This example shows a simple animated face built with SVG, featuring a yellow circle head, two eyes, and a mouth drawn as an arc. The eyebrows rise and fall repeatedly using D3 transitions. The rendering is done through D3 selections and the `arc` generator from D3, with the SVG elements styled via CSS attributes in the markup. The face is centered by translating a group element based on the SVG’s width and height, and animation is driven by chained `transition().duration()` calls that toggle the eyebrow group’s vertical position.

Iikbb-kbj
88% match
Loading thumbnail…

BA 401 EXPERIMENT

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.

DDavidPal94
88% match
Loading thumbnail…

face

A smiling face drawn with SVG shapes—a yellow circle, black outlines, pink ellipses for cheeks and ears, and an arc for the mouth—has animated eyebrows that continuously move up and down. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `attr` to build the face from primitive elements. A `transition` with a two-second duration moves the eyebrow group, while `arc` generates the mouth path. No external data is loaded; all geometry is hardcoded in `index.js`.

MM Hema
87% match
Loading thumbnail…

Face Smiling

A smiley face drawn with SVG shapes animates its eyebrows upward and back down over four seconds. The code uses D3 v5 selections and transitions to move a group containing arc and rect elements, while the face itself is built from circles and a path generated with the d3.arc function. The example demonstrates fundamental DOM manipulation in plain JavaScript, with no external data source.

Aamruthacharyakothakota@my.unt.edu
87% match
Loading thumbnail…

Let's make a face

A smiley face, drawn with SVG circles and an arc path, animates its eyebrows in a looping sequence in a D3.js visualization. The code builds the face by manipulating SVG groups and shapes, using D3's `select` and `append`. A `transition` with a 2000-millisecond duration shifts the eyebrow group up and down, creating the expression change. The face's construction relies on explicit pixel coordinates and D3's `arc` generator for the mouth, with a yellow circle serving as the head.

Mmoha0902
87% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw
87% match