Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published1🌍 Public

Last edited Mar 11, 2022

Created on Mar 11, 2022

This example demonstrates a simple, animated emoticon drawn with SVG shapes, including a yellow circle, eyes, and eyebrows. It shows how to use D3.js version 5 to select and append SVG elements, set their attributes, and apply basic transitions. The code uses `select`, `append`, `attr`, and the `arc` generator from D3, along with the `transition().duration()` API to animate the eyebrows' vertical position. The view consists of a static face with moving eyebrows, rendered directly in the browser.

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…

Fork of Hello VizHub

This example shows a smiling face drawn with SVG shapes, including a yellow circle for the head, two eyes, animated eyebrows, and a mouth. The code uses D3 v5 to build and manipulate the SVG elements, importing `select` and `arc` from the D3 library. The eyebrows animate by tweening their transform attribute over two separate 2-second transitions. The face is centered using a translated group, and the mouth is created with D3’s `arc` path generator. A local ES6 module provides a text message displayed via D3’s selection API.

Bbbroker

92% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple animated SVG face built with D3.js v5 and the VizHub framework. The code uses `d3.select`, `d3.arc`, and SVG shape elements like `circle`, `rect`, and `path` to construct a yellow face with red eyes, eyebrows, and a mouth. The `transition().duration(2000)` chain animates the right eyebrow's vertical position over two seconds. The visualization renders entirely in SVG, using a local ES6 module for a message and loading D3 from UNPKG.

YYanxxx447

92% match

Loading thumbnail…

Fork of Hello VizHub

The example displays a simple, animated face made of SVG shapes: a yellow circle for the head, two eyes, and a mouth drawn with an arc path. The eyebrows animate by smoothly translating up and down over a few seconds. It demonstrates how to load D3 v5 from a CDN and use its `select` and `arc` API functions, alongside importing a local ES6 module. The text "Hello VizHub!" appears below the graphic, styled via an external CSS file.

HHalvorte

90% match

Loading thumbnail…

Fork of Hello VizHub

This example shows a simple smiling face rendered as SVG, demonstrating basic D3 shape generation and element manipulation. The code uses D3 v5 via UNPKG, importing `select` and `arc` from the local module system. It constructs a yellow circle for the face, black circles for eyes, and a mouth path built with the `arc` generator on a 960×500 SVG canvas. The visualization also includes a background color style and serves as a minimal illustration of importing both D3 and local ES6 modules.

ZZeeshan

87% match

Loading thumbnail…

Fork of Viz

A cartoon face rendered with D3.js v5 in SVG animates its eyebrows with chained transitions. The code builds a yellow circular head, two eyes, and a mouth shaped by an arc generator with defined inner and outer radii. Eyebrow rectangles transition vertically up and down over two seconds each, using `selection.transition()` to create a looping bounce. The visualization runs in a React framework on a fixed 960×500 canvas, demonstrating basic SVG shape construction and timed attribute interpolation without external data.

Ggunasindhuja

87% match

Loading thumbnail…

Fork of Viz

A fork of an existing D3.js visualization renders an animated smiley face using SVG primitives, with a yellow head, purple fill, and white eyes. The code uses fundamental DOM manipulation methods like `select`, `append`, and `attr` from D3 v5 to build the face, while `transition().duration()` animates the eyebrows moving up and down over two seconds. The face is constructed from circles, rectangles, and arc paths, drawn on a 960×500 SVG canvas. This example demonstrates basic D3.js shape creation and animation without any external data source.

Ggunasindhuja

87% match

Loading thumbnail…

Hello VizHub

A cheerful yellow smiley face is drawn in an SVG canvas using D3 v5, with black outlined eyes and a mouth. The example demonstrates basic SVG shape creation and manipulation through D3’s `select` and `append` methods. Two rectangular eyebrows animate vertically using `transition().duration()`, moving up and then back down over two seconds each. The code also utilizes D3’s `arc` path generator to construct the mouth, showing fundamental drawing and animation capabilities on a static 900x600 canvas.

Ffahmijaafar

87% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22

86% match