Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
Ssanjaymirdha
Last edited Sep 19, 2019
Created on Sep 19, 2019
Forked from Hello VizHub

This example demonstrates a full-screen, browser-based text display that centers the message “Hello VizHub!” against a dark navy background. The visualization relies on an ES6 module (`myMessage.js`) to export the text string, which is then injected into the DOM via the `index.js` script and a bundled `bundle.js`. Styling is handled through CSS, importing the Ubuntu font from Google Fonts and defining the layout with a large 12em font size. The page structure is minimal, using a single `div` element within the HTML body.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example displays a large, centered "Hello VizHub!" message in bright white text against a dark blue background. It demonstrates basic VizHub project structure using separate ES6 modules for HTML, JavaScript, CSS, and a shared message constant. The code imports an Ubuntu font via CSS and uses the export statement in `myMessage.js` to share the message string with the main `index.js` file, which injects it into the page. The project relies on standard DOM manipulation and module bundling through VizHub's build system.

Ssanjaymirdha
91% match
Loading thumbnail…

Hello VizHub

This example showcases a full-screen, centered message reading “Hello VizHub!” in large Ubuntu type on a dark navy background. The visualization demonstrates a minimal D3.js v5 setup, using the `select` function to target a `div` by ID and set its text content. It imports a local ES6 module for the message and a Google Fonts stylesheet for typography, rendering the output entirely as styled HTML rather than drawing on a canvas or SVG.

Ddanrhymes
91% match
Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” as a full-screen, centered message against a dark blue background using the Ubuntu font. The visualization demonstrates the minimal setup for a D3.js project within the VizHub environment, leveraging D3’s `select` function to target the `#message` div and set its content from a separate ES6 module. The page’s styling comes from CSS, with font imported via Google Fonts, while the code structure shows a clear separation between HTML, JavaScript, and stylesheet files.

KKazushige Okuma
90% match
Loading thumbnail…

Hello VizHub!

This example displays the text “Hello VizHub!” centered on a dark background, styled with the Ubuntu font. The page is built using an HTML file that imports D3.js and renders the message by selecting a div and setting its text content with `d3.select` and `text`. The code is organized into separate ES6 modules, with the message defined in `myMessage.js` and the main logic in `index.js`. The styling is handled via an external CSS file that imports Google Fonts.

MMukund Khandelwal
90% match
Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” centered on a dark blue background using the Ubuntu font. The page structure is defined in HTML with a single div element, while the styling is applied through CSS, setting the color, size, and font family. The message itself is exported as a string from an ES6 module named `myMessage.js`, and the code imports the D3 library version 5.9.1 via a script tag. The visualization demonstrates a simple, static text rendering without any dynamic data or interactions.

Jjenniferslagt
89% match
Loading thumbnail…

Hello VizHub

This example displays a static, full-page “Hello VizHub!” message in large Ubuntu type on a dark navy background, demonstrating VizHub’s basic project structure. It uses D3 v5’s `select` method to set the text of a `div` element, pulling the string from an exported ES6 module (`myMessage.js`). The styling relies on an external Google Fonts import and plain CSS. The visualization is purely textual, showcasing how D3, JavaScript modules, and CSS combine in a minimal single-file setup.

YYehui Wang
89% match
Loading thumbnail…

Hello VizHub

This example displays a static, full-page “Hello VizHub!” message in large Ubuntu type on a dark navy background, demonstrating VizHub’s basic project structure. It uses D3 v5’s `select` method to set the text of a `div` element, pulling the string from an exported ES6 module (`myMessage.js`). The styling relies on an external Google Fonts import and plain CSS. The visualization is purely textual, showcasing how D3, JavaScript modules, and CSS combine in a minimal single-file setup.

YYehui Wang
89% match
Loading thumbnail…

Hello VizHub

This example displays a static, full-page “Hello VizHub!” message in large Ubuntu type on a dark navy background, demonstrating VizHub’s basic project structure. It uses D3 v5’s `select` method to set the text of a `div` element, pulling the string from an exported ES6 module (`myMessage.js`). The styling relies on an external Google Fonts import and plain CSS. The visualization is purely textual, showcasing how D3, JavaScript modules, and CSS combine in a minimal single-file setup.

YYehui Wang
89% match