Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
Jjiaweixu
Last edited Nov 1, 2019
Created on Nov 1, 2019
Forked from Hello VizHub

This example demonstrates the fundamental workflow of a VizHub project: using D3.js to manipulate the DOM and ES6 modules to organize code. The page displays a large, centered "Hello VizHub!" message in a custom Ubuntu font against a dark navy background. The `index.js` file imports the `select` function from D3’s v5 API and a local string from `myMessage.js`, then calls `select('#message').text()` to inject that message into the designated div. The styling relies on an external Google Fonts stylesheet imported via CSS.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example displays a single, large "Hello VizHub!" message in the center of a dark page, styled with white Ubuntu font. It demonstrates the basic workflow of a D3.js v5 project using embedded HTML and CSS, along with modular JavaScript. The code imports the `select` function from D3 to target the `#message` div and sets its text content from a separate ES6 module, `myMessage.js`, which exports the greeting string. The page loads D3 from a CDN and uses a Google Fonts import for typography.

吴吴昊
95% match
Loading thumbnail…

Hello VizHub

This example displays a single, large "Hello VizHub!" message in the center of a dark page, styled with white Ubuntu font. It demonstrates the basic workflow of a D3.js v5 project using embedded HTML and CSS, along with modular JavaScript. The code imports the `select` function from D3 to target the `#message` div and sets its text content from a separate ES6 module, `myMessage.js`, which exports the greeting string. The page loads D3 from a CDN and uses a Google Fonts import for typography.

吴吴昊
95% match
Loading thumbnail…

Hello VizHub

This example displays a single, large "Hello VizHub!" message in the center of a dark page, styled with white Ubuntu font. It demonstrates the basic workflow of a D3.js v5 project using embedded HTML and CSS, along with modular JavaScript. The code imports the `select` function from D3 to target the `#message` div and sets its text content from a separate ES6 module, `myMessage.js`, which exports the greeting string. The page loads D3 from a CDN and uses a Google Fonts import for typography.

吴吴昊
95% match
Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message on a dark blue background with white Ubuntu font. It demonstrates basic VizHub project structure using ES6 modules and D3.js. The code imports the `select` function from D3 and a custom `message` string from a local module, then sets the text of a `div` element using `select('#message').text()`. Styling is handled through an external CSS file with a Google Fonts import.

EEyob Westerink
94% match
Loading thumbnail…

Hello VizHub!

This example demonstrates VizHub’s basic workflow by rendering the text “Hello VizHub!” in a large, centered Ubuntu font on a dark background. It shows how a D3.js v5 selection, using `select('#message')`, sets the text content of a `div` element. The message originates from an ES6 module (`myMessage.js`) that exports a constant string, which is imported in `index.js`. The page structure is defined in `index.html`, and styling relies on a Google Fonts import and a small CSS ruleset.

LLeytzher
94% match
Loading thumbnail…

Hello VizHub!

This example demonstrates VizHub’s basic workflow by rendering the text “Hello VizHub!” in a large, centered Ubuntu font on a dark background. It shows how a D3.js v5 selection, using `select('#message')`, sets the text content of a `div` element. The message originates from an ES6 module (`myMessage.js`) that exports a constant string, which is imported in `index.js`. The page structure is defined in `index.html`, and styling relies on a Google Fonts import and a small CSS ruleset.

LLeytzher
94% match
Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub” message on a dark blue background with white Ubuntu font, demonstrating the basic structure of a D3.js visualization project. It uses D3 v5’s `select` API to target the `#message` div and set its text content, while the message itself is defined in a separate ES6 module (`myMessage.js`) and imported via `index.js`. The styling comes from a linked CSS file that imports Google Fonts. The visualization shows how to combine modular JavaScript, D3 selection, and external styling in a minimal setup.

EEddie Zhang
94% match
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub integrates ES6 modules and D3 v5 into a minimal web page. It displays a large, centered "Hello VizHub!" message in an Ubuntu font against a dark blue background. The page uses `index.js` to import a message string from `myMessage.js` and applies it to a div using d3’s `select` method. Styling is handled entirely by CSS, with the body configured for centered text and a custom Google Fonts import.

EElzbietaPP
94% match