Skip to main content
SimilarExport ZIP
100%

CBH

✓ Published0🌍 Public
Cchristoshanes
Last edited Mar 30, 2019
Created on Mar 30, 2019

A smiley face drawn with SVG elements animates its eyebrows up and down in a looping transition. The yellow circle face, eyes, rectangular eyebrows, and arc-based mouth are all appended to a central group via D3's selection API. The example uses d3.v5 to demonstrate fundamental DOM manipulation, with `transition().duration(2000)` chaining to move the eyebrow group between two vertical positions. All rendering is performed in SVG with a 960 by 500 viewport, and the animation runs indefinitely without user interaction.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Members

A smiley face rendered in SVG displays animated eyebrows that move up and down in a looping transition. The face is built entirely with D3.js v5 selections, appending a yellow circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth onto an SVG canvas. The animation uses chained `transition.duration` calls to translate the eyebrow group, while the static elements remain fixed. Data from a CSV file is loaded but not visualized in this example, which focuses on fundamental DOM manipulation and SVG shape construction.

Lliujunchao
87% 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
86% 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
86% 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
85% match
Loading thumbnail…

Untitled

A smiley face rendered with D3.js animates its eyebrows by moving them up and down in a looping transition. The face is built from SVG shapes, including a yellow circle for the head, two circular eyes, rectangular eyebrows, and a mouth created using the `d3.arc` path generator. Eyebrow movement is driven by chained `transition().duration(2000)` calls that alter the group’s translate transform, demonstrating fundamental DOM manipulation and animation sequencing in D3.

VVidhuS
85% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG has animated eyebrows that rise and fall. The face is built through basic DOM manipulation with D3.js, appending circles, rectangles, and an arc-shaped mouth to an SVG group. A chained `transition` with a 2000-millisecond duration moves the eyebrow group up and down. The example demonstrates core D3 v5 selections and transitions for simple, focused visual animations.

WWesley Yuen
85% match
Loading thumbnail…

d3js

A yellow smiley face with black outlines and animated eyebrows is drawn in a 960x500 SVG canvas using D3 v5. The face comprises circles for the head and eyes, rectangles for eyebrows, and a path generated with the D3 `arc` function for the mouth. The `d3.select` and `d3.transition` APIs animate the eyebrow group’s vertical position over two seconds, creating a blinking effect. All shapes are appended to a central group, with code structured for clarity.

Ppei9223
85% match
Loading thumbnail…

face

A yellow smiley face with animated eyebrows demonstrates basic SVG manipulation in D3.js. The code uses d3-selection to append circles and rectangles for the face, eyes, and brows, while a d3-shape arc creates the mouth. A chained transition moves the entire eyebrow group up and down in a continuous loop, altering its transform attribute over two-second intervals. The example relies on D3 v5 and SVG rendering.

SShantiHahn
85% match