Hello VizHub

100%

✓ Published0🌍 Public

Last edited Sep 10, 2019

Created on Sep 10, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal single-page visualization that displays the make of the first car from a hard-coded dataset. The code imports car records stored as a JSON string in `cars.js`, parses them with `JSON.parse`, and accesses a specific property to render text. It uses plain DOM manipulation via `document.getElementById` to update the content of a `<pre>` element in the `index.html` file. The visualization shows how static data from an external module can be directly injected into a webpage without any rendering libraries.

DDi Zhen

89% 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

89% match

Loading thumbnail…

Hello VizHub

This example displays a single car make from a hardcoded JSON dataset parsed as an ES6 module. The visualization shows the text "Honda" centered on a dark blue background, styled with an imported Google Font. It uses d3.v5 for the environment and plain DOM manipulation through `document.getElementById` to set the message text. The code demonstrates importing from a local module (`cars.js`) and parsing JSON as a data source.

Ssaamkhya

88% match

Loading thumbnail…

Hello World

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.

Kkippspan

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

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

87% match

Loading thumbnail…

Hello VizHub

This example displays the first car make from a static dataset in a large, styled headline. The code loads a small inline JSON array of five cars from the `cars.js` file, parses it with `JSON.parse`, and uses `document.getElementById` to set the text content of a div. The page imports D3 v5 via a CDN for potential use, though the current interaction relies solely on vanilla JavaScript. The styling uses an Ubuntu font, a dark blue background, and white text for high contrast.

Mmsygnowski

87% match