Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
HHilario Calderon
Last edited Sep 24, 2019
Created on Sep 24, 2019
Forked from Hello VizHub

This example shows a simple text rendering that greets viewers with “Lesson 1” on a dark blue background. It uses D3 v5’s `select` API to target a `div` with the id `message` and set its text content. The text is styled via CSS, importing the Ubuntu font from Google Fonts and setting a large font size. The code demonstrates ES6 module imports, with the message string stored in a separate `myMessage.js` file, and includes a local `bundle.js` script for execution.

AI-generated description

Tutorial #1 showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example demonstrates a minimalist "Hello VizHub" message rendered as large, centered text on a dark blue background. It shows how a basic D3.js selection and text assignment can integrate with ES6 module imports and external CSS styling. The code uses `d3.select` to target the `#message` div and set its content from an imported `message` constant, while the page loads D3 v5 from a CDN and applies Ubuntu font styling via Google Fonts. The example highlights the structure of a VizHub project with separate HTML, JavaScript, and stylesheet files.

CChang Lu
91% match
Loading thumbnail…

Hello VizHub

This example renders a simple text message, “Hello VizHub!”, centered on a dark blue background using the Ubuntu font. It shows how to combine a minimal HTML page with D3.js and ES6 modules in a VizHub project. The code uses `d3.select` to set the text content of a div, imports the message from a separate `myMessage.js` module, and applies styling through an external CSS file loaded via `@import`. The example demonstrates basic D3 selection and module import syntax without any data or complex visualization.

Bbukbukbukka
90% match
Loading thumbnail…

Hello VizHub

This example displays a single static text message, “Hello VizHub!,” centered on a dark blue background using the Ubuntu font. It demonstrates fundamental VizHub workflow patterns: an HTML page loads D3 v5 and a bundled JavaScript file, while the main script imports the `select` function from D3 and a message constant from a local ES6 module. The code then sets the text content of a `div` element with the ID `message`, relying on CSS for styling and the `@import` rule for external fonts.

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

Hello VizHub

This example displays a simple text message, “Hello VizHub,” centered on a dark blue background with a large Ubuntu font. It shows how to set up a basic D3.js v5 project within the VizHub environment. The code imports the `select` function from D3 to target the `#message` element and uses a local module, `myMessage.js`, to supply the text content. Styling is applied via an external CSS file that imports the Ubuntu typeface from Google Fonts.

Hhhhheeee
90% match
Loading thumbnail…

Hello VizHub

This example displays a simple text message, “Hello VizHub,” centered on a dark blue background with a large Ubuntu font. It shows how to set up a basic D3.js v5 project within the VizHub environment. The code imports the `select` function from D3 to target the `#message` element and uses a local module, `myMessage.js`, to supply the text content. Styling is applied via an external CSS file that imports the Ubuntu typeface from Google Fonts.

Hhhhheeee
90% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal "Hello VizHub!" message rendered as large, centered text on a deep blue background with a custom Ubuntu font. It shows how to structure a basic D3.js project using ES6 modules and external stylesheets. The code imports the `select` function from D3 v5 to target the `#message` div and sets its text content from a separate `myMessage.js` module, while `styles.css` applies the styling. It serves as a template for integrating D3 with modular JavaScript and CSS.

JJSR2000
90% match