Skip to main content
SimilarExport ZIP
100%

test

✓ Published0🌍 Public
CChaeHyun-Kim
Last edited May 31, 2021
Created on May 31, 2021

This animation shows a yellow smiley face with black eyes and eyebrows that raise and lower repetitively over time. The face is drawn using SVG shapes, with a large circle for the head, smaller circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows animate via chained `transition()` calls that shift their vertical position over two-second intervals. The code imports `select` and `arc` from the D3 v6 library and uses `transition.attr` to create the movement.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Test1

A yellow smiley face is drawn with SVG circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The example demonstrates animated eyebrow movement using D3 transitions that lower and raise the rectangles over repeated two-second intervals. The scene is built with D3 selections to append and position elements, while the arc generator from the same library defines the mouth shape. The animation runs as an infinite loop, showcasing basic D3 transition chaining.

Bbillmccabeusa@hotmail.com
91% match
Loading thumbnail…

This is a test page.

A smiling face is drawn with D3.js and its eyebrows animate up and down. The face is built by appending SVG shapes—a yellow circle, two eye circles, rectangular eyebrows, and an arc-based mouth—to a central group. The eyebrows move via chained `transition().duration()` calls that toggle their vertical position. The code uses D3 v5 and imports `select` and `arc` from the `d3` module, with the entire animation rendered directly in SVG.

BBrian Merchant
89% match
Loading thumbnail…

D3 test

This example shows a simple yellow face built from SVG shapes, with eyes that blink through a repeating eyebrow animation and a smiling arc-shaped mouth. The code uses D3 v6 selections to append circles, rectangles, and a path to an SVG canvas, while the mouth is drawn with the `d3.arc` helper. A two-stage `transition` chain animates the eyebrows downward and back, demonstrating chained timing. The face is centered using an SVG transform, and static styling comes from the included stylesheet.

Vvmoharir
88% match
Loading thumbnail…

Hello HTML

This animation demonstrates how D3.js can manipulate SVG elements to create a moving smiley face. The yellow face with eyes, eyebrows, and a mouth is drawn using basic shapes and a d3.arc path. Eyebrows animate up and down through chained d3 transitions that adjust their transform attribute over two-second intervals. The example uses D3 selections to append circles, rectangles, and an arc-generated path within a centered group.

AArunGauchan
88% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js that animates its eyebrows in a continuous up-and-down motion. The face is rendered as SVG elements, including circles for the eyes and an arc-generated path for the mouth, all positioned within a central group. Using D3 selections and the `transition().duration()` method, the eyebrows—drawn as rectangles—move in a two-step sequence that repeats once. The code imports `select` and `arc` from the D3 v5 library to create the shapes.

SSimon Fei
88% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with SVG shapes, whose eyebrows animate up and down in a looping motion. It demonstrates fundamental DOM manipulation using D3.js selections, appending a circle for the head, circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc()` helper for the mouth. The animation runs via chained `transition()` calls with `.duration(2000)` on the eyebrow group. The code imports `select` and `arc` from the `d3` module and uses `attr()` to set positions and styles.

Aalbanodossantos
88% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation builds a smiley face from SVG shapes, then makes its eyebrows bounce repeatedly as a looped transition. The face is composed of a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth positioned with SVG transforms. The code imports `select` and `arc` from D3 v5 to generate the mouth path and manipulate elements. A chained `transition().duration(2000)` sequence moves the eyebrow group up and down, demonstrating basic DOM selection and animation without data binding.

Vveagy
88% match
Loading thumbnail…

testefaenskap

This example shows a cheerful yellow face rendered as SVG, with eyes, moving eyebrows, and a smile. The eyebrows animate upward and downward in a looping transition. The visualization uses D3 v7’s `select`, `arc`, and `transition` APIs to build the facial features and drive the motion. All elements are drawn as SVG shapes, including circles for the face and eyes, rectangles for the eyebrows, and an arc path for the mouth. The animation runs automatically on page load within a fixed 960×500 viewport.

Ssh1shk1n
88% match