Skip to main content
SimilarExport ZIP
100%

BA 401 EXERCISE

✓ Published0🌍 Public
DDebaliena
Last edited May 3, 2021
Created on May 3, 2021

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.

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
98% 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
91% 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
90% 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
90% match
Loading thumbnail…

Let's make a face with D3.js Exercise!

A yellow smiley face, built entirely with SVG in an HTML page, features animated eyebrows that repeatedly move up and down to change its expression. The example demonstrates fundamental D3.js v5 DOM manipulation by using `d3.select` to grab the SVG element, `d3.append` with `attr` to construct circles and rectangles for the face, and an `arc()` generator for the mouth. A recursive `transition()` chain, with a 2-second duration each way, drives the eyebrow motion within a grouped `g` element.

Ssalvar2134
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation in D3.js. The face is drawn using SVG shapes, including a circle for the head, eyes, rectangular eyebrows, and a mouth path created with the `d3.arc` helper. The eyebrows move upward and downward through chained `transition().duration(2000)` calls, altering their vertical translation. The example uses D3 v5 selections to append and style SVG elements within a centered group, illustrating basic data-driven document updates without external datasets.

Jjufrank
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face from primitives: circles for the head and eyes, rectangles for the eyebrows, and an arc-generated path for the mouth. Using D3's selection and transition methods, the eyebrows animate vertically over two seconds, then return, cycling through the eyebrow group's transform attribute. The example relies on d3.select, d3.arc, and chained transitions to compose and animate SVG shapes.

Jjhsu0811
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is constructed by appending SVG shapes including circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all centered using a group transform. D3 transitions move the eyebrow group up and down over two-second intervals, while the `d3.arc` helper generates the mouth's curved path. The example uses d3.select and d3.arc from the D3 v5 library, with static SVG rendering and CSS to hide page overflow.

MMichał Szumnarski
89% match