Cars report

100%

✓ Published0🌍 Public

Last edited Apr 26, 2021

Created on Apr 26, 2021

This example demonstrates how to load D3 via UNPKG and use ES6 module imports in a VizHub project. It displays a simple text message, "Hello world!", inside an HTML `<pre>` element using JavaScript to set its content. The code imports from local ES6 modules, as shown in `myMessage.js`, and references the `document.getElementById` API to update the page. The project includes separate files for HTML structure, JavaScript logic, and CSS styling, though the styling is minimal and not applied to the visible output.

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…

Cars report

This example demonstrates a minimal VizHub project that loads D3 via UNPKG and uses ES6 modules to display a static message. The index.js file imports a local module and sets the text content of a `<pre>` element to “Hello World”. The code also includes an exported constant `hi` from `cars.js` and a separate `myMessage.js` module, though only the greeting is rendered. The page is styled with a centered, large-font CSS rule for a `#message` id.

Bbalak045

93% match

Loading thumbnail…

Cars Report

This example demonstrates VizHub’s ability to load D3 via UNPKG and use ES6 module imports from both `"d3"` and local files. It starts by importing D3 and defining a local module, then uses JavaScript to set the text content of an HTML element. The code shows a minimal setup with an `index.html` referencing a bundled script, and a `styles.css` that styles the message element, though the displayed text is only a simple greeting with no interactive behavior.

JJeff

92% match

Loading thumbnail…

Cars Report

This example demonstrates the basic setup of a VizHub project, displaying a text message on a blank page. It loads D3 via UNPKG and uses ES6 modules to import a message from a local file, `myMessage.js`. The code also shows how to import from the `d3` package and manipulate the DOM via `document.getElementById` to update the displayed content.

JJpcofre

92% match

Loading thumbnail…

Cars Report

This example demonstrates loading external modules and rendering a text message in a browser environment using VizHub. It imports the D3 library via UNPKG and uses a local ES6 module (`myMessage.js`) to export a string. The `index.js` file selects an HTML element by its ID and sets its text content to display the message. The page structure includes a `<pre>` element and a `<div>`, styled with CSS for centered, large text. The code highlights basic DOM manipulation with `document.getElementById` and module imports, though it does not include any data visualization or chart rendering.

AAnimus365

92% match

Loading thumbnail…

Cars Report

This example displays a static “Hello world!” message inside a large `<pre>` element, with text loaded from a local ES6 module and set via `document.getElementById` in JavaScript. It demonstrates VizHub’s support for importing D3 and local modules, using `index.js` and `myMessage.js` to inject content into `index.html`. The page relies on a bundled `bundle.js` script and includes a `styles.css` rule that centers and enlarges the message text, though no dynamic data or visualization is present.

Jjkmingwen

90% match

Loading thumbnail…

Cars report

This example displays the message “Hello VizHub!” in a simple web page. It demonstrates fundamental VizHub capabilities by loading D3 from UNPKG and using ES6 module syntax to import local code. The `index.js` file selects an element by ID and updates its text content, while a separate `myMessage.js` module exports the displayed string. The page includes a basic HTML structure with a `<pre>` element and a linked `styles.css` file for centering and font sizing.

KKeerthikaK98

90% match

Loading thumbnail…

Cars Report

This example demonstrates a minimal "Hello VizHub!" message rendered as text on a webpage. The code loads D3 via UNPKG and imports local ES6 modules, including a custom message module. The `index.html` file contains a single `<pre>` element whose content is set through the DOM API in `index.js`. A separate `styles.css` file applies text alignment and font sizing. The example does not include any data visualization, charts, or D3-specific functions, but shows basic module imports, DOM manipulation, and external library loading.

AAbdoulaye DIOP

90% match

Loading thumbnail…

Cars Report

This example displays a static “Hello World” message in large text on a webpage. It demonstrates basic VizHub setup by loading D3 from UNPKG and importing a local ES6 module, though the active code uses standard DOM manipulation via `document.getElementById` to update the message content. The page structure is defined in `index.html` with a single `<pre>` element, while the main `index.js` file assigns the text directly, with commented-out examples showing how `d3.select` and local module imports could be used instead.

Sshour5

90% match