Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
Cchenxlong3
Last edited Sep 28, 2021
Created on Sep 26, 2021
Forked from Hello VizHub

This example displays a single centered message, "Hello VizHub!", using D3’s `select` method to target a div by ID and set its text content. It demonstrates loading D3 v5 via UNPKG and importing a local ES6 module (`myMessage.js`) that exports a string constant. The page structure is defined in `index.html`, with styling from `styles.css` that centers the text and sets a large font size. The visualization highlights how to combine external library imports with modular JavaScript code in a D3-based project.

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 a minimal D3.js visualization that displays the text "Hello VizHub!" in large, centered typography. The code uses the `select` API from D3 v6 to target the `#message` div and set its text content with data from an imported ES6 module. A separate CSS file controls the visual styling, including centering and an oversized font size. The page structure is defined in `index.html`, which loads D3 from a CDN and references the bundled JavaScript.

PPvs Prashanth
94% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that displays the text "Hello VizHub!" in large, centered typography. The code uses the `select` API from D3 v6 to target the `#message` div and set its text content with data from an imported ES6 module. A separate CSS file controls the visual styling, including centering and an oversized font size. The page structure is defined in `index.html`, which loads D3 from a CDN and references the bundled JavaScript.

PPvs Prashanth
94% match
Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered on the page using D3.js version 5, loaded from UNPKG. It demonstrates importing the `select` API from D3 and a local ES6 module that exports the message string. The `index.html` includes a stylesheet and loads D3 via a script tag, while `bundle.js` executes the imports to set the text content of the `#message` div.

Ppiggy1195@gmail.com
94% match
Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered on the page using D3.js version 5, loaded from UNPKG. It demonstrates importing the `select` API from D3 and a local ES6 module that exports the message string. The `index.html` includes a stylesheet and loads D3 via a script tag, while `bundle.js` executes the imports to set the text content of the `#message` div.

Ppiggy1195@gmail.com
94% match
Loading thumbnail…

Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered in large type within a message div. It demonstrates VizHub’s fundamental workflow by loading D3.js v5 from UNPKG via a script tag and importing the `select` function from the `"d3"` module. The code also imports a local ES6 module, `myMessage.js`, which exports the displayed string. D3’s `select` method targets the `#message` element to set its text content, while CSS styles control font size and alignment.

SShane Gibney
94% match
Loading thumbnail…

Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered on the page using a simple DOM-based visualization. It loads D3 v5 from a CDN and uses the `select` function to target the `#message` div, setting its content with a local ES6 module import. The code demonstrates modular JavaScript with `myMessage.js`, while `styles.css` controls the font size and alignment. No external dataset is involved; the visualization is purely a static text rendering.

HHoosierExperienceDesigner
94% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that displays the text "Hello VizHub!" in the center of the page. It shows how an HTML page can load D3 from a CDN and use ES6 modules to structure code. The `index.js` file imports the `select` function from D3 and the `message` constant from a local `myMessage.js` module, then uses `select('#message').text()` to update the DOM. Styling is applied through an external CSS file, and three files—HTML, JavaScript, and CSS—work together as a basic template.

YYU
94% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered on the page at a large font size. It demonstrates the basics of building a D3.js v5 visualization with VizHub, using the `import` statement to load both the D3 `select` function and a local ES6 module (`myMessage.js`). The HTML links a local stylesheet and loads D3 from UNPKG, while the JavaScript selects the `#message` div and sets its text content. The visualization is static, with no data source or dynamic rendering.

MMuhriddinMahmudjonovich
94% match