Skip to main content
SimilarExport ZIP
100%

SVG 123

✓ Published0🌍 Public
Eee-aa
Last edited Dec 15, 2023
Created on Dec 15, 2023
Forked from Hello VizHub

This example shows a simple webpage displaying the text "Hello VizHub!" centered on the screen. The visualization demonstrates the basic structure of a VizHub project, including how to import D3.js from a CDN and how to use local ES6 modules. The code uses D3's `select` API to target the HTML element with the ID `message` and set its text content. A separate `myMessage.js` module exports the string that is displayed, and basic CSS styling is applied through `styles.css`.

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…

Hello VizHub

This example demonstrates the foundational structure of a VizHub visualization, displaying a static "Hello VizHub!" message prominently centered on the page. It shows how a simple D3.js project is organized with separate HTML, JavaScript, and CSS files, using ES6 module imports to share code between files. The code uses the D3 `select` function from d3.v5 to target the `#message` div and set its text content to the exported string from `myMessage.js`. The styling relies on an external Google Fonts import and a dark background, with the message rendered in a large, light-colored Ubuntu typeface.

GGulrez
89% match
Loading thumbnail…

Act 6.2

This example displays a simple web page with the text “Hello VizHub!” centered and enlarged via CSS. It demonstrates the basic workflow of a VizHub project by loading D3.js from a CDN and importing both a D3 API function and a local ES6 module. The code uses `select` from D3 to target a div element and sets its text content using a string exported from `myMessage.js`. The visualization itself is minimal, focusing on how D3 and local modules integrate within an HTML page.

VVenkataSatyaRamKamini@my.unt.edu
89% match
Loading thumbnail…

Hello VizHub

This example demonstrates the fundamental structure of a VizHub project by rendering a simple text message to the page. It shows how to combine an HTML entry point, ES6 modules, and D3.js to produce visible output. The visualization uses D3’s `select` method to target a div with the id `message` and set its text content to a string exported from a separate JavaScript module. CSS styles the message with large, centered text, while the HTML file links the stylesheet and loads D3 from a CDN before executing the bundled script.

YYedrup
88% 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.

吴吴昊
88% 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.

吴吴昊
88% 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.

吴吴昊
88% match
Loading thumbnail…

Hello VizHub

The example displays a static, centered message of "Hello VizHub!" in large text, demonstrating the basic setup of a VizHub project. It uses D3.js (v5) via the `select` API to target the HTML element and set its text content. The code imports the message string from a separate ES6 module, illustrating modular code organization. The styling is applied through an external CSS file, and the HTML structure connects the stylesheet, D3 library from a CDN, and a bundled JavaScript file.

Rrampanyam
88% match
Loading thumbnail…

Hello VizHub!

This example displays the text "Hello VizHub!" in a large, centered message on a steelblue background, styled with the Ubuntu font. It demonstrates a basic D3.js v5 setup using the `select` function to update the DOM, while an SVG rect is drawn as a decorative block. The code imports a local ES6 module, `myMessage.js`, to supply the text, and renders the visualization as static SVG within an HTML page.

BBossmaen
88% match