Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Jun 22, 2022

Created on Jun 22, 2022

This example demonstrates the basic structure of a VizHub project, showing how to display a simple text message on a webpage using D3.js. The code imports the `select` function from the D3 library and a custom `message` string from a local ES6 module. It then uses `select` to target the `#message` div element and sets its text content to the imported string. A separate CSS file centers the message and scales its font size to 12em, while the HTML loads D3 from UNPKG and bundles the JavaScript modules.

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

SSaiSree0122

100% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the minimal structure of a VizHub visualization, showing how to load D3 and display a text message on a web page. It combines D3's `select` API with a local ES6 module export to set the content of an HTML `div` element. The code imports `select` from D3 and a `message` string from a separate local module, then applies that message as the element’s text. Styling is handled via a linked CSS file, and D3 is sourced from UNPKG.

DDreamerking45

94% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a minimal VizHub project that loads D3.js from UNPKG and uses its `select` method to update the text content of a `<div>`. It also showcases the use of local ES6 modules, with `index.js` importing a `message` constant from `myMessage.js`. The imported string is then displayed using `select('#message').text(message)`, while a stylesheet centers the text at a large font size.

SSnehareddy19

94% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub supports importing D3 and local ES6 modules to render a simple text message. The page displays “Hello VizHub!” centered in a large font using the `select` function from D3 to set the text content of a div element. The code imports `select` from `d3` and a `message` constant from a local `myMessage` module, showing modular code organization. D3 v5 is loaded via UNPKG, and the styling is defined in a separate CSS file.

FFaysalIbnMohi

94% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how a simple VizHub project is structured by rendering the text “Hello VizHub!” in the center of the page. It uses D3 v5’s `select` method to target the `#message` div and set its text, while a local ES6 module exports the message string. The code also shows how to import D3 from UNPKG and include external CSS, serving as a minimal template for understanding module imports and DOM manipulation with D3.

AArv1228

94% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular structure of a VizHub project, showing how D3.js and local ES6 modules work together to render a simple text message. It uses D3 v5 loaded via UNPKG, with the `select` function from D3 to target the `#message` div and set its text content. The message itself comes from a separate local module, `myMessage.js`, which exports the string "Hello VizHub!". Styling is handled by CSS, centering the text at a large font size.

Aatang148

94% match

Loading thumbnail…

Fork of Hello VizHub

This example displays the text "Hello VizHub!" centered and styled via CSS. It loads D3.js from a CDN and uses the `select` API to target the `#message` div, setting its text content. The text value comes from a local ES6 module named `myMessage.js`. The project demonstrates importing both external libraries and local modules within a VizHub environment.

NNITIN0601

94% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how D3.js and ES6 modules can be used together in a VizHub project. It renders a simple text message, "Hello VizHub!", centered on the page using a CSS style. The code imports the `select` function from D3 and a custom local module exporting the message string. It loads D3 from a CDN and uses D3's selection API to update the DOM.

VVenkat-Sumith-Thota

94% match