Fork of Fork of BA401 EXERCISE$

100%

Fork of Fork of BA401 EXERCISE$

✓ Published1🌍 Public

Last edited May 3, 2021

Created on May 3, 2021

This piece creates an abstract, animated face using SVG and D3.js. Two large circles form the head, with smaller circles as eyes and paths as a mouth, while rectangular eyebrows animate up and down over two seconds. The D3 selection API and chained transition methods control the eyebrow movement on the SVG canvas. The rendering is static SVG with a CSS animation triggered by the transitions, and no external data source is used.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of BA401 EXERCISE$

This animated SVG face uses D3.js to construct a yellow circular head with eyes, eyebrows, and a mouth from basic shapes and paths. The eyebrows animate vertically using D3 transitions, moving down 50 pixels and back over two-second intervals. The static SVG markup provides a pink background circle with green stroke and two small circles, while the JavaScript code dynamically builds the facial features using D3's `select`, `append`, and `arc` API.

Iikbb-kbj

94% match

Loading thumbnail…

Fork of BA401 EXERCISE$

This example shows an animated, SVG-based face that blinks with a two-second eyebrow bounce. The graphic is built with D3, using `select` to target the SVG and append functions to create grouped elements for the eyes, eyebrows, and mouth. The mouth is a D3 `arc()` path, and the animation is driven by chained `transition().duration()` calls that move the eyebrows up and down. The static HTML includes a pink circle with green stroke, while D3 adds the yellow face behind it.

Iikbb-kbj

91% match

Loading thumbnail…

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

A smiling face built from SVG shapes animates its eyebrows in a loop. The visualization uses D3.js (v5) to construct and manipulate the face: circles form the head, eyes, and mouth, while rectangles form the eyebrows. The code joins transitions on the eyebrow group to create a repeating up-and-down motion. The rendering is pure SVG, with no external data source, focusing on fundamental DOM manipulation with D3's selection and transition APIs.

AAISWARYAMARAPATLA1999

86% match

Loading thumbnail…

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

This visualization presents a smiling face constructed from SVG shapes: a circular head, two eyes, animated eyebrows, and a curved mouth. The eyebrows move up and down repeatedly in a continuous cycle, demonstrating basic DOM manipulation through D3.js’s selection and transition APIs. The code relies on D3 v5, using `select`, `append`, and `transition` to animate rectangle eyebrow elements, while a static path built with `arc()` forms the smile. The example runs as a self-contained HTML page with an embedded SVG canvas.

AAISWARYAMARAPATLA1999

86% match

Loading thumbnail…

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

A smiling face rendered in SVG animates its eyebrows upward and downward in a looping two-second cycle. The face is constructed entirely through D3.js v5 DOM manipulation, using `select` to target the root `svg` element, then appending and positioning circles for the eyes, rectangles for the eyebrows, and a path built from `arc` for the mouth. The eyebrow animation is driven by chained `transition().duration(2000)` calls that alternately shift the parent group’s `transform` attribute, demonstrating basic tweened state changes on SVG attributes. The composition is centered via a translated group, with hardcoded spacing values for facial features.

VVamshisoleti09

86% match

Loading thumbnail…

Fork of Fork of Fork of Fork of d3js

This example renders an animated face built from SVG primitives, including a yellow circular head with eyes, eyebrows, and an arc-based mouth. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle blinking or surprised expression. The code imports `select` and `arc` from D3 v5, uses `d3.arc()` to define the mouth’s path, and positions all elements relative to a centered `<g>` group. The SVG canvas is 960 by 500 pixels, with a blue stroke on the head and no external data source.

Mmuslimaaliyeva

86% match

Loading thumbnail…

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

This interactive visualization displays a smiling face built with SVG shapes, whose eyebrows slide upward and then return in a repeated motion. The code uses D3.js v5 to select the SVG canvas, compute dimensions, and append a green circle as the head, along with eyes, rectangular eyebrows, and an arc-based mouth. D3’s `transition()` and `duration()` methods drive the eyebrow animation, while `select` and `arc` are explicitly imported from the library. The example demonstrates fundamental DOM manipulation and chained transitions in a minimalist, animated composition.

SSaivignesh-9176

86% match

Loading thumbnail…

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

A fork of an earlier D3.js face-building exercise, this piece renders a static SVG cartoon face and then animates its eyebrows in a looping up-and-down motion. The face is constructed from basic geometric primitives like circles, rectangles, and an arc-based mouth, with features centered and positioned using transforms. The animation relies on chained `transition().duration()` calls to move the eyebrow group, while the overall drawing is handled with D3 selections and the `arc` generator from the d3-shape module. All elements are rendered in an SVG container.

Mmanojgne

86% match