Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Hello VizHub

✓ Published0🌍 Public
MMuhriddinMahmudjonovich
Last edited Oct 13, 2022
Created on Oct 13, 2022

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.

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 displays the text “Hello VizHub!” prominently in the center of the page, styled with large CSS typography. It demonstrates fundamental VizHub capabilities by loading D3.js v5 from the UNPKG CDN, importing the `select` function from `d3`, and importing a custom message from a local ES6 module. The code renders the message by selecting the `#message` div and setting its text content.

JJeorge D. Anderson II
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 displays a simple web page that outputs “Hello VizHub!” in large, centered text using D3.js. The visualization demonstrates how to load D3 from a CDN via UNPKG and import both the `select` API from D3 and a custom ES6 module, `myMessage.js`, which exports the displayed message. The rendering is handled through D3’s `select` function, which targets the `#message` div, while the styling is defined in a local CSS file.

Ssabaliaqat786
94% match
Loading thumbnail…

Fork of 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.

Cchenxlong3
94% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to build a simple visualization with D3.js v5, displaying the text “Hello VizHub!” in a large, center-aligned message. The code imports the `select` API from D3 to target a DOM element and set its text content, while also importing a local ES6 module to supply the message string. The page loads D3 from a CDN and uses a separate CSS file for styling, showcasing a minimal workflow for combining external libraries, local modules, and static assets.

Pprats-mh
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 demonstrates how VizHub projects are structured, showing a simple web page that displays the text “Hello VizHub!” in large centered type. The visualization uses D3.js v5, loaded via UNPKG, to select the `#message` div and set its text content. The project also illustrates ES6 module imports, both from the D3 library (`import { select } from 'd3'`) and from a local module (`./myMessage`), which exports the displayed message string. A separate CSS file styles the message with a 12em font size.

MMuhriddinMahmudjonovich
94% match
Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that displays the text “Hello VizHub!” centered on the page. The code loads D3 v5 via UNPKG and uses the `select` function to set the text content of a `div` element. It also showcases ES6 module imports by pulling a message string from a separate local file, with styling applied through an external CSS stylesheet.

Mmayuri-gosapphire
94% match