Untitled

100%

✓ Published0🌍 Public

Last edited Apr 22, 2019

Created on Apr 22, 2019

Forked from Let's make a face with D3.js!

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.

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 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

91% match

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

90% match

Loading thumbnail…

Untitled

This example shows a smiley face rendered in SVG whose eyebrows move up and down in a repeating animation. Using D3.js, the code selects SVG elements, binds data to them, and updates their positions in response to a timer-based loop. The eyebrow movement is achieved through direct `selection.attr` calls on the `transform` and `y` attributes, with the animation driven by a `setInterval` function. The visualization is built entirely with plain D3 selections, with styling handled via an external stylesheet.

NNikhilchiguru-8

90% 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

89% 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

88% match

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiley face whose eyebrows move, demonstrating fundamental DOM manipulation with D3.js. The face is drawn as SVG elements within a 960-by-500 canvas, and the animation cycles the eyebrows' positions through a looping interaction. The code uses D3’s selection and transformation methods to update the eyebrow elements’ attributes dynamically, relying on the `d3` library (v5.9.2) loaded from a CDN, with the page styling defined in a separate CSS file. The visual output is rendered entirely in vector graphics, and the movement is driven by JavaScript logic in the bundled script.

Zztawil

87% 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

86% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face whose eyebrows move using fundamental D3.js DOM manipulation. The code selects SVG elements and binds data to them with `d3.select` and `data()`, then applies updates via `enter` and `merge` selections. It uses `d3.interval` to drive the animation, adjusting eyebrow positions through `attr` calls on the `cx` and `cy` properties. Rendering occurs in an SVG container created in the HTML, with styles defined in an external stylesheet. The face itself is composed of circles and ellipse shapes, while the script runs a continuous loop to shift the eyebrows in and out.

Ccentem

86% match