Skip to main content
SimilarExport ZIP
100%

Assignment 1 Tweak a Face!

✓ Published1🌍 Public
Vveagy
Last edited Aug 29, 2018
Created on Aug 29, 2018

A smiling face drawn with SVG shapes animates its eyebrows upward and back down. The visualization uses D3 v5 to construct and position a yellow circle for the head, rectangles for eyes and eyebrows, and an arc for the mouth. The code relies on D3's `select` and `arc` APIs, plus chained `.transition().attr()` calls to animate the eyebrow group's vertical translation over two seconds.

AI-generated description

Author: Weijie Pang

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 1 Tweak a Face!

A stylized face built from SVG shapes animates its eyes and eyebrows in a looping sequence. The yellow circular head stays static while the eye group shifts vertically, followed by a separate eyebrow group that moves after a delay. The mouth is drawn as an arc path using D3's `arc` generator. The code uses D3 v5 selections and chained `transition.attr` calls on the SVG rectangles and groups to create the coordinated motion.

Vveagy
95% match
Loading thumbnail…

Assignment 1 Tweak a Face!

A yellow face drawn with SVG shapes animates on a dark background, blinking and wiggling its eyebrows. The piece uses D3.js v5's selection API and transition system to create timed, sequential movements of the eye and brow groups. A circular head with a stroked outline is composed of rectangles for features, and an arc path forms the mouth. The animation demonstrates declarative SVG manipulation through chained `transition().attr` calls, altering the group transforms over set durations.

Vveagy
94% match
Loading thumbnail…

Assignment 1 Tweak a Face!

A face built from basic SVG shapes—a yellow circle, rectangular eyes, and a mouth drawn with an arc path—undergoes a sequence of animated tweaks. The eyes and eyebrows slide vertically via chained `transition` calls on their containing groups, shifting the expression over six seconds. The code uses D3 v5 selections and the `arc` generator to construct the mouth. Animations rely on D3's `transition.attr` to adjust `transform` attributes, demonstrating simple, timed state changes without user interaction.

Vveagy
94% match
Loading thumbnail…

Assignment 1 Tweak a Face!

A cheerful yellow circle with a surprised expression animates its facial features. The face, centered in an SVG canvas, uses rectangles for eyes and eyebrows and an arc path for the mouth. D3 transitions sequentially move the entire eye group downward and the eyebrows upward, creating a playful, winking-like motion. The code builds the face with d3.select, d3.arc, and chained transition().duration() calls, all rendered as static SVG shapes that animate over time.

Vveagy
93% match
Loading thumbnail…

Assignment: Tweak The Face!

A simple, animated face rendered in SVG. The face consists of a yellow circle with black outlines, two white eyes with pupils, and a mouth drawn as a half-circle arc. The left pupil is positioned statically, while the right pupil animates horizontally across the eye using a D3 v5 `transition` and `duration`. The code constructs each shape with D3 selections and attributes, using the `arc` generator for the mouth.

NNikhil Reddy Manda
89% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from D3.js SVG shapes animates its eyebrows upward and back down. The code uses `d3.select` to append circles, rects, and an `arc()`-generated path onto a 960×500 SVG, with a yellow circular head, black-outlined eyes, and a curved mouth. Eyebrow motion is driven by chained `transition().duration(2000)` calls that translate the eyebrow group, demonstrating sequential SVG attribute tweening.

Ddev-ignacio-h
87% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to construct a smiling face from SVG primitives, with animated eyebrows that move up and down over time. The face consists of a yellow circle, two eyes, eyebrows, and a mouth drawn using an arc path. The animation is handled through chained `transition().duration(2000)` calls that alternately shift the eyebrow group’s `transform` attribute, creating a simple looping motion. The code relies on methods like `select`, `append`, and `attr` for DOM manipulation, along with D3’s `arc` generator for the mouth shape.

Vveagy
87% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiling face out of SVG shapes, with animated eyebrows that move up and down. A yellow circle forms the head, two circles serve as eyes, rectangles become eyebrows, and a path generated with the `d3.arc` helper creates the mouth. Using a `transition().duration(2000)` chain, the eyebrow group toggles its vertical translation, shifting it downward then returning it to the original position. The code explicitly binds SVG elements via `select` and `append`, relying on D3 v5’s modular imports for `select` and `arc`.

Rrjohnson5016
86% match