Skip to main content
SimilarExport ZIP
100%

New Data Viz

✓ Published0🌍 Public
RRickRobinson17
Last edited Aug 27, 2022
Created on Aug 27, 2022
Forked from Hello VizHub

This example displays the text "Hello VizHub!" centered in the browser, demonstrating the basic workflow of a VizHub project. It loads D3 version 5 from UNPKG and uses the `select` API to target the `#message` div, setting its content from a message imported as a local ES6 module. The project structure highlights how to combine external libraries with modular JavaScript, using `styles.css` for layout and 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…

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
88% match
Loading thumbnail…

myViz

This example displays the text “Hello VizHub!” centered in the browser using a large font. It demonstrates fundamental VizHub capabilities: loading D3 v5 from a CDN via UNPKG, importing the `select` function from D3, and importing a local ES6 module named `myMessage` that exports the displayed string. The page structure is defined in HTML, with styling applied through an external CSS file. D3’s `select` method targets the `#message` div to set its text content, showcasing modular code organization and dynamic DOM updates.

Rrajeshathakur
88% match
Loading thumbnail…

Hello VizHub

This example demonstrates how to set up a minimal VizHub project, rendering the text “Hello VizHub!” from an ES6 module into the center of the page. It uses D3.js’s `select` function to target the `#message` div and update its text content. The project structure shows local CSS and JavaScript imports, with D3 v5 loaded from a CDN in the HTML. It highlights basic module export/import patterns and DOM manipulation with D3.

Vvaynexie
87% match
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular, browser-based data visualization projects. It renders a simple text message on a styled web page using a custom ES6 module and D3’s `select` function to update the DOM. The code includes an HTML entry point, a JavaScript bundle, and a CSS file with imported Google Fonts. The visualization relies on D3 v5 and shows the integration of external libraries and local JavaScript modules within a single VizHub project.

Sshawchand
87% match
Loading thumbnail…

Hello VizHub

This example demonstrates the fundamental workflow of a VizHub project, showing how to create a simple text-based visualization. It imports the `select` function from D3 via an ES6 `import` statement, and also imports a local ES6 module, `myMessage.js`, which exports a string. The code then uses D3’s `select` method to target the `#message` div and set its text content to that exported string, resulting in a large, centered display of "VizHub!" styled by CSS.

FFBIbaby
87% match
Loading thumbnail…

Hello VizHub

This example demonstrates VizHub’s core workflow by displaying a static “Hello VizHub!” message on screen. It shows how D3.js version 5 can be imported as ES6 modules, with `select` targeting a DOM element and setting its text content. The code also highlights modular JavaScript by exporting the message string from a separate file, while CSS styling applies a custom font and dark background. No data loading or dynamic behavior occurs; the visualization is purely a text-based output.

DDronom
87% match
Loading thumbnail…

Hello VizHub

This example demonstrates how to build a minimal visualization with VizHub, displaying the text “Hello VizHub!” centered on the page. It loads D3 v5 via UNPKG and uses `d3.select` to set the message content. The code also shows importing local ES6 modules, with a separate `myMessage.js` file exporting the message string, while `styles.css` handles the typography and centering.

KKeondoPark
87% match
Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” prominently on a dark blue background, centered in a large Ubuntu font. It demonstrates how to structure a basic D3.js project within the VizHub environment by separating concerns into an HTML entry point, a stylesheet, and modular JavaScript files. The visualization uses D3’s `select` function to target the `#message` div and set its text content, while the message itself is imported from a local ES6 module (`myMessage.js`). The project loads D3 v5.9.1 from a CDN.

Aalexmeh96
87% match