Fork of loading data

100%

Fork of loading data

✓ Published0🌍 Public

Last edited Jan 23, 2021

Created on Jan 23, 2021

This example demonstrates how VizHub projects can load external libraries and organize code into reusable modules. It loads D3 v5 from UNPKG and uses the `select` function to target a `div#message` element, setting its text content from a locally imported ES6 module. The `myMessage.js` file exports a simple string, while `styles.css` centers the text in a twelve-em font size. The result is a minimal hello-world that shows D3’s import syntax and local module architecture.

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 load D3 via UNPKG and use ES6 modules in a VizHub project. It uses the `select` function from D3 to target a `#message` div and set its text content. The text string comes from a local module, `myMessage.js`, which exports a `message` constant. The final page renders a centered, large-font "Hello VizHub!" message using CSS from `styles.css`, showcasing basic module imports and DOM manipulation.

DDivyaVellanki

91% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub projects can load D3 and organize code with local ES6 modules. It uses D3’s `select` function to target a `div` with the id `message` and set its text content to a string imported from a separate module. The imported `message` constant is defined in `myMessage.js`. The page includes D3 v5 via UNPKG, and the stylesheet centers the message with a large font size.

Ffrozengem397

90% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load external libraries and organize code in a VizHub project. It uses D3.js version 5, loaded via UNPKG, to select an HTML element with id “message” and set its text content. The text string “Hello VizHub!” comes from a local ES6 module, myMessage.js, imported using the `import` syntax. The visualization renders in an SVG container with a fixed width and height, while the primary output is a large, centered text message styled through CSS, showcasing modular code structure and D3’s selection API.

SShalin Shah

90% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic structure of a VizHub project, using D3.js to manipulate the DOM. It shows how to load D3 v5 from a CDN and import specific functions like `select` from the library. The code also imports a local ES6 module, `myMessage`, to retrieve a string, which is then applied to the text content of a `#message` div. This provides a minimal, clear template for combining external libraries with modular JavaScript in a web visualization. The data is a simple static message, not a dataset.

Bbellsamuel

90% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic structure of a VizHub project, showing how to load D3 via UNPKG and use ES6 modules to manage code. The visualization renders a single text message, "Hello VizHub!", centered on the page using the `select` function from D3 to set the text content of a div. It also imports a local module, `myMessage.js`, to supply the message string, and applies styling through an external CSS file. The code highlights D3’s integration with modern JavaScript module syntax and simple DOM manipulation.

SSwavna

90% match

Loading thumbnail…

Fork of Hello VizHub jls

This example demonstrates how to load D3 via UNPKG and use ES6 modules with D3’s `select` function to set text content in a page. It imports a string from a local module and uses `select('#message').text(message)` to render it. The code shows basic HTML structure and CSS styling for centered, large text. It is a minimal demonstration of D3’s DOM manipulation and module import patterns in a VizHub project.

Jjlspangl

90% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to incorporate D3.js into a VizHub project using ES6 modules and a local CSS file. It loads D3 v5 via UNPKG and uses the `select` API to target a div with the id `message`, setting its text content to a string imported from a separate `myMessage.js` module. The page renders a simple centered text display, with styling applied through `styles.css`. The visualization serves as a minimal template for structuring reusable module code with D3.

Mmsasuhaimi

89% match

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates how VizHub supports ES6 modules and external libraries by rendering a centered “Hello VizHub!” message. It imports the `select` function from D3 v5 (loaded via UNPKG) to manipulate the DOM, and imports a local `message` string from a separate `myMessage.js` module. The message is displayed in a large, centered font using CSS. The code shows the basic setup for combining CDN-loaded D3 with modular JavaScript in a VizHub project.

NNithin Gopalakrishnan

89% match