Hello World

100%

✓ Published0🌍 Public

Last edited Jan 21, 2022

Created on Jan 21, 2022

This example demonstrates how to load and parse a small JSON dataset of car information and render the first car’s make in the browser. It shows the basic structure of a VizHub project, including importing local ES6 modules (`cars`, `myMessage`) and the `select` function from D3 v5, which is loaded via a CDN. The code also includes commented-out examples of DOM manipulation with `textContent` and D3’s selection API, while the HTML page contains a `<pre>` element that would display the 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…

Hello VizHub

This example demonstrates a minimal VizHub project that displays the make of the first car from a static JSON dataset. It uses D3 v5 for data handling and DOM manipulation, importing a parsed array of car records from a separate ES6 module via `export` and `import`. The code targets a `<pre>` element in the HTML and sets its text content to "Honda" using `document.getElementById`. The project shows how to structure modular code with external data and a simple rendering update.

Ssleyus

88% match

Loading thumbnail…

Cars Report

This example shows a minimal web page that renders the text “hello world” in large type, demonstrating how to load D3 and local ES6 modules in VizHub. The page uses an HTML `<pre>` element as the output target and updates its content via `document.getElementById` in the main script, which imports from `cars.js` and `myMessage.js`. The data file includes a small JSON array of car objects parsed with `JSON.parse`. The code relies on a bundled script generated by Rollup, with styling defined in `styles.css`.

XXAlomia

86% match

Loading thumbnail…

Hello VizHub

This example displays the make of the first car in a small static dataset. It demonstrates basic VizHub project structure, including ES6 module imports and a separate stylesheet. The page renders the text “Honda” prominently in a large, styled font on a dark blue background. The code imports an array of car objects from `cars.js`, parses it with `JSON.parse`, and writes the result to the DOM using `document.getElementById` and `textContent`. The styling uses CSS with the Ubuntu font from Google Fonts.

Sshehryar-hashir

86% match

Loading thumbnail…

Hello VizHub

This example displays a single car make from a small embedded dataset, rendered as large text in a custom-styled page. It uses D3 v5 indirectly through the `cars.js` module, which defines an array of five car objects parsed from a JSON string. The main script imports that array, accesses the first element, and sets the text content of a div using `document.getElementById`. The visual result is a minimalist, high-contrast presentation that demonstrates how to combine external data files, JavaScript module imports, and CSS styling within the VizHub environment.

Bbaisampayans

86% match

Loading thumbnail…

Cars Report

This example displays a simple “Hello World” message in large type on a plain web page. It demonstrates fundamental VizHub workflows, including loading D3.js from a CDN and using ES6 module imports. The code imports the `select` function from D3 but primarily uses the native DOM API, `document.getElementById().textContent`, to set the text. A commented-out local module demonstrates how to import custom ES6 files, though only the D3 import is active in the displayed result.

Ppuru001

86% match

Loading thumbnail…

Hello VizHub

This example displays the make of the first car from a small embedded dataset, rendering the text “BMW” prominently on a dark background. It demonstrates basic VizHub capabilities, including ES6 module imports and JSON parsing. The page uses D3 v5’s `select` function, though the core visualization simply sets the `textContent` of a div element, while styling relies on Google Fonts’ Ubuntu and custom CSS. The data is hardcoded in a separate `cars.js` module as an array of car objects.

Jjakirst

86% match

Loading thumbnail…

Hello VizHub

This example displays the make of the first car in a small dataset, rendering "Honde" as large text on a blank page. It imports car data from a local `cars` module that parses an embedded JSON string with D3.js v5. The `index.js` file directly sets the text content of a predefined `message-element` in the HTML, demonstrating minimal data binding and module import in a VizHub environment.

BBillMark98

86% match

Loading thumbnail…

js tutorial

This example demonstrates how to load and display local data in a VizHub project using D3 and modern JavaScript modules. It imports a cars dataset from a local ES6 module, parses JSON, and writes the first car’s make to an HTML `<pre>` element via `document.getElementById`. The visualization relies on D3 loaded from UNPKG, showcasing basic import syntax and DOM manipulation without any chart rendering.

JJustin Epstein

86% match