Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ddok0086m
Last edited Dec 19, 2022
Created on Dec 19, 2022

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.

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 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
95% 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
95% 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 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
93% 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
93% 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 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
90% 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
89% match