second.js!

100%

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

This example renders a cheerful, cartoon-style face in an SVG canvas, with a yellow circular head, eyes, eyebrows, and a mouth. The drawing uses D3 v7’s `select` and `append` to build the shapes, and the eyebrows perform a repeated vertical animation using `transition().duration(2000)`, shifting them down and back up. The mouth is drawn as an arc path using D3’s `arc` with specified inner and outer radii and angular ranges. The static face layout and animated eyebrow movement demonstrate basic D3 graphics and transition capabilities.

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…

second

This example presents a simple, animated face constructed entirely from SVG primitives. A yellow circle with a black outline forms the head, while two circles serve as eyes and two rectangles act as eyebrows. The eyebrows undergo a looping transition that raises and lowers them over a two-second duration. The visualization is built using D3 version 7, importing functions like `select` and `arc`, and relies on `transition` for animation. The mouth is a path generated from an arc with specified inner and outer radii and angles.

MMohanavalliT

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a bright yellow cartoon face using SVG shapes, with two eyes, a mouth, and animated eyebrows. The face is centered within an SVG canvas using D3 selections and transformation attributes. Eyebrows animate up and down using chained `transition().duration()` calls. The code utilizes `d3.select`, `d3.arc` for the mouth path, and D3’s transition system to create the motion. The rendering approach is purely declarative SVG construction in a React-free environment, with styles defined in a separate CSS file.

SSreekar Reddy

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-like face drawn with SVG primitives, including eyes, eyebrows, and a mouth. The face’s eyebrows perform a continuous up-and-down animation using D3’s `transition` API, creating a simple, expressive motion. The code uses D3 v7’s `select`, `append`, and `arc` functions to construct the shapes, with a 960×500 SVG canvas. The mouth is generated via the `arc()` path geometry, while the eyebrows shift vertically over two-second intervals, showcasing basic SVG rendering and animation in D3.

Xxychen0612.cs09@nycu.edu.tw

89% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263

88% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43

88% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry

88% match

Loading thumbnail…

Let's make a face with D3.js!

A playful D3.js example builds a cartoon face from SVG shapes, showing a yellow circle with black-outlined eyes, animated eyebrows, and an arc-based smile. It renders entirely in SVG within a 960×500 viewport, using `d3.select`, `d3.arc`, and chained `transition` calls to animate the eyebrows upward and back over three seconds. The face is centered via a group transform, with fixed pixel constants for eye spacing, radius, and eyebrow dimensions. No external data is loaded, as all geometry is hardcoded in JavaScript.

Kkartikaymanoj

88% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a friendly yellow face built entirely with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. The face is constructed using D3.js v5 selections to append a circle for the head, additional circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth. The code uses `transition()` with a 2000-millisecond duration to animate the eyebrow group’s `transform` attribute. All elements are centered within an SVG canvas using a translation transform, and the styling is handled by an external stylesheet.

Ddacoylo

88% match