Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published2🌍 Public

Last edited Sep 18, 2023

Created on Sep 18, 2023

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.

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

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

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

93% match

Loading thumbnail…

Fork of Hello VizHub

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.

SSaurabh Gupta

90% match

Loading thumbnail…

Fork of Hello VizHub

This example visualizes a smiley face rendered as an SVG, composed of a yellow circular background and a mouth arc drawn with D3’s `arc` generator. The React app uses `d3.select` to set a message and imports local modules, including `BackgroundCircle`, demonstrating ES6 module usage. D3 v5 and React are loaded via UNPKG, with the SVG centered using a `translate` transform.

TToonysg

89% match

Loading thumbnail…

Fork of Hello VizHub

This example displays a simple SVG path rendered as a blue-filled, red-stroked shape, repositioned with a CSS transform. It demonstrates VizHub’s core workflow: loading D3 v5 via UNPKG, using the `select` function from D3 to set text content, and importing a local ES6 module for a greeting message. The SVG markup is static, with styling applied through an external stylesheet.

PPiotr Paszek

89% match

Loading thumbnail…

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

This example builds a cheerful cartoon face from SVG shapes—a yellow circle for the head, eyes, eyebrows, and a mouth drawn with `d3.arc()`. The eyebrows animate upward and back down via chained `transition().duration(2000)` calls. The code imports `select` and `arc` from the D3 v7 module, loads the library from UNPKG, and uses local ES6 modules to demonstrate VizHub's project structure.

AAmol Tangade

88% match

Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

VVijay

88% match