Skip to main content
SimilarExport ZIP
100%

Gudu Pandit

✓ Published0🌍 Public
AAli Sher
Last edited Aug 16, 2022
Created on Aug 16, 2022

This example demonstrates VizHub’s ability to combine external libraries with local ES6 modules. The page renders a blue, full-width greeting and a green, hoverable text block that turns white on mouseover. Using D3 v5, it imports the `select` function to set the message from a local module, while the stylesheet manages layout and interaction. The code highlights importing from both a CDN and local files.

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…

Hello VizHub

A minimal example demonstrates the core capabilities of VizHub, showing how a web page can combine a local stylesheet, a D3 library loaded from a CDN, and imported ES6 modules. The visualization renders the text "Hello VizHub!" centered on the page using a large font. The code imports the `select` function from `d3` to target the `#message` div and set its text content from a separate local module. The example illustrates modular code organization and dependency management within a single project.

Aanduskong
85% match
Loading thumbnail…

Hello VizHub

This example greets the page with a large centered message, demonstrating the integration of D3.js within an ES6 module workflow. The code imports the `select` function from D3 v5 to set the text of a `div` element, pulling the string from a separate `myMessage.js` module. Styling uses an external Ubuntu font and a dark blue background via CSS. The visualization itself is minimal, focusing on basic DOM manipulation and module imports rather than data rendering.

Ddonalta
85% match
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 development with D3.js, displaying a simple "Hello World!" message centered on the page. The code imports the `select` function from D3 and a custom `message` constant from a local ES6 module, then uses `select('#message').text()` to update the DOM. Styling comes from an external stylesheet, while D3 v5 is loaded via CDN. The visualization shows basic DOM manipulation and module imports rather than data-driven graphics.

AAlainKuiete
84% match
Loading thumbnail…

Hello VizHub

This example displays the text "Helloxy VizHub!" in the center of the page using D3.js v5, loaded from UNPKG. It demonstrates importing the `select` function from the D3 module and a local ES6 module named `myMessage.js`. The code selects the `#message` div and sets its text content, while CSS controls the font size and alignment. It shows how to combine external libraries with local modules in a VizHub project.

EEric Ho
84% match
Loading thumbnail…

Hello VizHub

This example demonstrates how to combine D3.js with local ES6 modules in a web page. It uses D3’s `select` function to find a DOM element by ID and set its text content, while a separate module (`myMessage.js`) exports a string constant. The page loads D3 from a CDN (unpkg) and its CSS from a local file, with the final message displayed in large centered text.

GgabrielBar
84% match
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 JavaScript and D3.js. It displays the text “Hello VizHub!” centered on a dark blue page with large, styled typography. The code imports the `select` function from D3 v5 and uses it to set the text content of a `#message` div. It also imports a string from a separate local module, `myMessage.js`, and applies the Ubuntu font via CSS.

Ppin84
84% match
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 JavaScript and D3.js. It displays the text “Hello VizHub!” centered on a dark blue page with large, styled typography. The code imports the `select` function from D3 v5 and uses it to set the text content of a `#message` div. It also imports a string from a separate local module, `myMessage.js`, and applies the Ubuntu font via CSS.

Ppin84
84% match
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 JavaScript and D3.js. It displays the text “Hello VizHub!” centered on a dark blue page with large, styled typography. The code imports the `select` function from D3 v5 and uses it to set the text content of a `#message` div. It also imports a string from a separate local module, `myMessage.js`, and applies the Ubuntu font via CSS.

Ppin84
84% match