Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
VVidhuS
Last edited May 27, 2020
Created on May 27, 2020

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A D3.js animation draws a yellow smiley face whose eyebrows bob up and down. The code builds the face from SVG shapes—circles for the eyes and head, rectangles for the brows, and an arc-generated path for the mouth—centered via a translated group. Using `d3.select` and `d3.arc`, it applies chained `transition().duration()` calls to animate the eyebrow group’s vertical position, creating a looping motion. The rendering is a lightweight DOM manipulation example with no external data, running entirely in the browser.

Ddok0086m
95% match
Loading thumbnail…

Untitled

A yellow smiley face with black-outlined eyes and a wide open mouth is rendered in D3.js. The animation moves the face’s rectangular eyebrows upward and back down in a looping transition. The code uses D3’s `select`, `arc`, and `transition` APIs to construct the SVG shapes and animate the eyebrow group’s transform attribute over two sequential two-second durations. The visualization demonstrates fundamental DOM manipulation by building each facial feature from primitive SVG elements.

Aaudreyfr
94% match
Loading thumbnail…

Untitled

A yellow smiley face with black eyes and a curved mouth sits centered on a black background, while its rectangular eyebrows bounce up and down in a looping two-second animation. The example demonstrates fundamental DOM manipulation using D3.js v3, building the face from SVG shapes like circles, rectangles, and an arc path. The eyebrows move via chained `transition()` calls with a 2000-millisecond duration, toggling their vertical offset back and forth. All rendering is done through D3 selections and the `arc()` helper, with no external data source.

DDebaliena
94% match
Loading thumbnail…

Untitled

A yellow smiley face with black eyes and eyebrows animates its eyebrows upward and downward in a looping motion over two seconds. The SVG face includes a frowny mouth drawn using D3's `arc()` path generator, with the entire scene rendered at 200x200 pixels. The code uses D3 v5 selections and transitions to move the eyebrow group, while static elements like the head, eyes, and tears are pre-defined in the HTML. The animation runs without user interaction, repeating the eyebrow movement indefinitely.

PPatilShruti20
92% match
Loading thumbnail…

Untitled

A smiley face drawn in yellow with black outlines animates by raising its rectangular eyebrows upward, holding, and then lowering them back. The face uses D3.js to construct SVG shapes, including circles for the eyes and an arc path for the mouth. The animation sequences through chained transitions, each lasting two seconds, to move the eyebrow group along the y-axis. The code relies on D3's `select` and `arc` functions, with a React-based HTML file providing the page scaffold.

Bbut-whythough
92% match
Loading thumbnail…

Untitled

A yellow smiley face with black features animates on a blank canvas. D3.js transitions move both rectangular eyebrows up and down in a repeating two-second cycle, while the eyes and an arc-shaped mouth remain static. The code uses D3’s `select`, `arc`, and chained `transition` with `duration` to manipulate SVG elements, specifying positions and dimensions via hardcoded constants for the face’s geometry. The rendering is a pure SVG animation driven entirely by D3’s DOM manipulation and transition methods.

Iiperalta94
92% match
Loading thumbnail…

Untitled

A D3.js animation presents a smiley face whose eyebrows move in a looping motion. The visualization demonstrates fundamental DOM manipulation, directly altering the position of SVG elements through JavaScript. Using the D3.js library’s selection and attribute methods, the code updates the `cx` and `cy` coordinates of the eyebrow shapes over time. The rendering occurs within a full-screen canvas defined by the external stylesheet, with the animation driven by a continuous timer that recalculates positions. The project consists of a single HTML page containing the embedded D3 script, illustrating interactive vector graphics without external data sources.

NNilla
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with black outlined eyes and a curved mouth, which animates by moving its eyebrows up and down over a two-second cycle. The face is drawn using D3.js v5, with an SVG circle for the head, rectangles for the eyebrows, and a path generated via `arc()` for the mouth. The eyebrow movement uses chained `transition().duration()` calls on an SVG group, illustrating fundamental DOM manipulation techniques with `select` and `append`.

VVidhuS
90% match