Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Feb 21, 2022

Created on Feb 14, 2022

This example showcases a minimal SVG scene composed of circles and rectangles in both black and red, rendered within an 960x500 viewport. The page demonstrates VizHub’s module system by importing D3 v5 via UNPKG for DOM selection, specifically using `select` to set the text of a message div. A local ES6 module supplies the greeting text, while CSS styles the message with large, centered typography.

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 demonstrates how to set up a minimal VizHub project using D3.js and ES6 modules. It renders a static SVG circle while displaying the text “Hello VizHub!” in a separate div element. The code imports the `select` function from D3 via UNPKG, as well as a local `message` constant from an external module, showing modular code organization. The SVG is defined directly in the HTML, with styling controlled by a linked stylesheet.

EEvan Liu

91% match

Loading thumbnail…

Fork of Hello VizHub

This example displays two large SVG circles and a text message reading "Hello VizHub!" It demonstrates how to set up a VizHub project using D3 v5, loaded from UNPKG. The code imports the `select` function from D3 to update the text of an HTML div, and also imports a local ES6 module to supply the message string. It shows a basic SVG rendering approach with static shapes.

Ggaryz1997

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

90% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, showing how to load D3 v5 from a CDN and import specific functions like `select` from the `d3` module, along with a local ES6 module exporting a `message` string. The rendered output is a full-screen SVG element with a red background, styled via an external CSS file and an inline script that applies the selection. The code illustrates basic SVG rendering and module imports without any data binding or interactive behavior.

AadbSalam

90% match

Loading thumbnail…

Fork of Hello VizHub

This example shows static SVG shapes—a red circle and a green rectangle—positioned on a black background, demonstrating basic D3 selection and styling via `d3.select`. The page loads D3 v5 from UNPKG and uses a local ES6 module (`myMessage.js`) to export a message, though the message is not rendered in the visible output. The SVG is defined directly in `index.html`, while `index.js` applies the background color through a D3 selection. The code illustrates VizHub’s support for CDN imports, local modules, and inline SVG markup.

AAyush Morankar

89% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within a VizHub project, displaying the text "Hello VizHub!" centered on the page. It shows how to import D3 functions and local ES6 modules, using `select` from D3 to update a DOM element's content. The code loads D3 via UNPKG and combines it with a custom module, `myMessage.js`, to supply the message string. The rendering uses an SVG element in the HTML, while styling for the message text is handled in a separate CSS file.

RRoderick Anthony

89% match

Loading thumbnail…

Fork of Hello

This example demonstrates a minimal D3.js setup within the VizHub environment, showing how to integrate external libraries and local ES6 modules. The page renders a static SVG circle and displays the text "Hello VizHub!" using D3’s `select` to target a div by ID. The code imports the `select` function from D3 v5 via UNPKG, imports a message string from a separate `myMessage.js` module, and applies styling through an imported CSS file. The visualization highlights basic modular coding and D3’s DOM manipulation capabilities.

Aanthonythecodewizard

89% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that renders an SVG element and displays the text "Hello world" in the DOM. It loads D3 v5 from UNPKG and uses the `d3.selectAll` API to target the SVG, though no visual marks are drawn. The code imports a local ES6 module (`myMessage.js`) to show modular JavaScript in a VizHub project. Styling is handled externally via CSS for the message div.

BBoni

89% match