smily

100%

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

A yellow smiling face with eyes, eyebrows, and a mouth is drawn in SVG using D3 v7. The face is centered via a translated group, and the mouth is created with the `d3.arc` API. Eyebrows animate up and down using chained `transition` calls over two seconds each. The visualization loads D3 from UNPKG and imports `select` and `arc` from the `d3` module.

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…

Making a smily face

A yellow smiley face is drawn on an SVG canvas with two eyes, a smile, and animated eyebrows. The face is centered using a D3 selection with the `translate` transform, and the mouth is created with the `d3.arc` path generator. The eyebrows use `transition().duration()` to move up and down over two seconds each, demonstrating chained D3 transitions. The code relies on `d3.select`, `d3.arc`, and SVG elements like `circle` and `rect`, all rendered with d3.v5.

Kketuckychix

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

90% match

Loading thumbnail…

Making a smiling face

A yellow circle with black outlines forms a smiling face, featuring two eyes, curved eyebrows drawn as arc paths, and a wide, open smile created with a D3 arc generator. The entire composition is centered within an SVG using a group transform. The eyebrows animate via chained `transition().duration(2000)` calls, shifting their vertical position up and down in a continuous loop. The visualization uses D3 v5 selections and the `arc()` shape generator, rendering static SVG elements with JavaScript-driven animation.

Mmagua

90% match

Loading thumbnail…

Smily Face

A yellow smiley face is drawn with SVG shapes, including circles for the eyes and an arc-based mouth, centered on a blank canvas. The code uses D3 v6 to construct the face and animates the eyebrows and mouth with chained `transition().duration()` calls, shifting their transforms over two-second intervals. The mouth path is generated using `d3.arc`, and the animation cycles the eyebrows up and down while rotating and recoloring the mouth. The example demonstrates basic SVG styling, grouping, and transition sequencing in D3.

CChristine Lanser

90% match

Loading thumbnail…

Smiley face

A yellow smiley face with black eyes, eyebrows, and an arc-shaped mouth is drawn in the center of an SVG canvas using D3.js v6. The face is constructed with D3 selections and shape generators, including `d3.arc` for the mouth and appended SVG `circle` and `rect` elements. A brief animation occurs when the eyes transition their fill color to black after a one-second delay. The graphic is rendered as static SVG with a simple transition effect.

AArun

90% match

Loading thumbnail…

smile face

A yellow smiley face is drawn in SVG, with black eyes, eyebrows, and a semi-circular mouth. The eyebrows animate by shifting their vertical position using chained D3 transitions. The face is constructed with D3 selections, using `circle` and `rect` elements for the features, and a `path` created with the `d3.arc` generator for the mouth. The entire group is centered and scaled, with the animation triggered on page load.

YY-oringe

90% match

Loading thumbnail…

Smile Face

A smiling face constructed from SVG shapes is rendered and animated with D3.js v6. The code uses D3's `select` and `arc` APIs to draw the yellow head, black eyes, rectangular eyebrows, and a white mouth. The eyebrows are animated with chained `transition` calls, moving them up and down over two-second intervals. The visualization centers the face within a 960x500 SVG canvas.

SSiddhesh Palande

90% match

Loading thumbnail…

Smiley face using D3

A smiley face rendered in SVG uses D3.js to demonstrate fundamental DOM manipulation, with animated eyebrows that move up and down. The code draws yellow circles for the face and eyes, rectangles for eyebrows, and an arc-generated mouth, all positioned via D3 selections and transforms. A transition chain animates the eyebrow group’s vertical position over four one-second intervals, showcasing repeated attribute updates. The example relies on D3 v5’s `select`, `arc`, and `transition` APIs within a static SVG container.

AAyush Gupta

89% match