Fork of Fork of Hello VizHub

100%

Fork of Fork of Hello VizHub

✓ Published1🌍 Public

Last edited Nov 9, 2021

Created on Nov 9, 2021

This example demonstrates how VizHub loads D3 and renders a simple text message using local ES6 modules. The code uses `d3.select` from an UNPKG-hosted D3 v5 bundle to set the text of a `#message` div, with the string imported from `myMessage.js`. It includes a stylesheet for centered, large-font styling. The page structure is defined in `index.html`, while `bundle.js` loads the main script that connects these pieces.

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 Fork of Hello VizHub

This example demonstrates the foundational workflow of VizHub, showing how a web page loads D3 and integrates local ES6 modules. It uses D3 v5, imported via `select` from the `d3` package, to set the text content of a `div` element with the ID `message`. The text originates from a separate local module, `myMessage.js`, which exports the string "Hello VizHub!". The rendering is purely DOM-based, with an HTML file linking a CDN-hosted D3 script and a bundled JavaScript file, plus a CSS stylesheet to center the output.

Vvineelaramulapalli32

93% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal VizHub setup that renders a simple text message to the page. It loads D3.js from a CDN via UNPKG and uses the `select` function to target a `#message` div, setting its text content to a string imported from a local ES6 module. The message originates from `myMessage.js`, while `styles.css` centers the text and enlarges its font size. This fork serves as a template for combining external libraries, local modules, and styling in a single visualization.

AAdwait Godbole

93% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the core workflow of VizHub by displaying a simple text message. It loads D3 v5 from a CDN and uses the modern `import` syntax to access D3’s `select` function, which sets the text content of a `#message` div. The project also imports a local ES6 module `myMessage.js` to supply the string, with styling handled by an external `styles.css` file.

Vvikkili

93% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular structure of a VizHub project, showing how D3.js and local ES6 modules work together to render a simple text message. It uses D3 v5 loaded via UNPKG, with the `select` function from D3 to target the `#message` div and set its text content. The message itself comes from a separate local module, `myMessage.js`, which exports the string "Hello VizHub!". Styling is handled by CSS, centering the text at a large font size.

Aatang148

93% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub supports importing D3 and local ES6 modules to render a simple text message. The page displays “Hello VizHub!” centered in a large font using the `select` function from D3 to set the text content of a div element. The code imports `select` from `d3` and a `message` constant from a local `myMessage` module, showing modular code organization. D3 v5 is loaded via UNPKG, and the styling is defined in a separate CSS file.

FFaysalIbnMohi

93% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub loads D3 from a CDN and uses ES6 modules to display a simple text message. It shows the basic setup of an HTML page with D3 v5, where the `select` function targets the `#message` div and sets its text content. The message string is imported from a local `myMessage.js` module, and the layout is styled with centered, large font text via `styles.css`.

Ttingfangcheng

93% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, showing how to display a text message centered on the page using HTML and CSS. The code loads D3 v5 via a CDN in `index.html` and uses an ES6 module, `myMessage.js`, to export the string "Hello VizHub!" which is imported and logged to the console in `index.js`. The visualization relies on the `#message` div styled in `styles.css` rather than any D3 data-binding or SVG rendering. It highlights the integration of local modules, external libraries, and styling within a single-page framework.

Vvikram548

92% match

Loading thumbnail…

Fork of Fork of Fork

This example demonstrates a minimal D3.js setup within VizHub, displaying the text “Hello VizHub!” centered on the page. It shows how to load D3 v5 from a CDN via UNPKG, use ES6 module imports to access the `select` function from D3, and import local custom modules from a separate file. The code selects a `div#message` element and sets its text content using D3’s selection API, with styling applied through an external CSS file.

Nnikhilkashid3593

92% match