aadhi

100%

✓ Published0🌍 Public

Last edited Sep 21, 2023

Created on Sep 21, 2023

This example draws a stylized smiley face using D3 v7, rendering a yellow circle with eyes, eyebrows, and an arc-based mouth as SVG elements. The code imports `select` and `arc` from the D3 module and uses `transition().duration()` to animate the eyebrows moving up and down repeatedly. The face is centered via an SVG group transform, with static shapes positioned by absolute pixel coordinates on a 960×500 canvas.

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…

Let's make a face with D3.js!

This example uses D3.js to build a simple smiley face out of SVG shapes, with animated eyebrows that move up and down. It demonstrates fundamental DOM manipulation through method chaining: appending circles and rectangles to construct the face, and using `transition().duration()` to move the eyebrow group. The code imports `select` and `arc` from D3 v5, and draws the mouth with the `arc()` path generator. A yellow circle with a black stroke forms the head, with eyes and eyebrows positioned via SVG transforms.

Ffaaty

87% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, with animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental DOM manipulation by using D3 selections to create and position circles, rectangles, and an arc-based mouth via the `d3.arc` API. Built with D3 v5, it chains `.transition().duration(2000)` calls to animate the eyebrow group's transform attribute. The source code imports `select` and `arc` from D3, and renders everything within a fixed 960×500 SVG canvas.

Mmmustafau

86% match

Loading thumbnail…

hi

This example renders a cheerful face in SVG, with a yellow circular head, two eyes, animated eyebrows, and a smiling arc-shaped mouth. The eyebrows smoothly move up and down using chained `transition` calls over two-second intervals. The code uses D3 v7’s `select` and `arc` APIs, importing them directly from the `d3` module. All shapes are positioned and scaled relative to the SVG’s width and height attributes.

KKeerthanaD11

86% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face in an SVG using D3.js v5. The face consists of a circle, two eyes, animated rectangular eyebrows, and a mouth created with the d3.arc path generator. The eyebrows transition their vertical position over two seconds using chained transition calls, moving downward and back upward. The code uses d3.select and attribute manipulation to position elements relative to the SVG’s center.

KKaavya Lakshmanan

86% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG with animated eyebrows that move up and down. D3.js creates the face using circles for the eyes, rectangles for the eyebrows, and an arc path for the mouth, all positioned within a central group. The animation uses chained transitions on the eyebrows group, alternating between two vertical offsets over two-second intervals. The code imports `select` and `arc` from d3 and uses an SVG container sized 960 by 500 pixels.

AAngelii

86% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger

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

86% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai

86% match