Hello VizHub

100%

✓ Published0🌍 Public

Last edited Jun 20, 2019

Created on Jun 20, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

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

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

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

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

86% match

Loading thumbnail…

Hello VizHub

This example demonstrates a simple data-visualization starter using a hard-coded JavaScript array of car objects from a local module. The page displays the model field of the first car entry inside a large, styled HTML element. The code imports the `cars` array and the `select` function from D3 v5, then uses `select('#message').text()` to render the text content. The visualization relies on plain DOM manipulation rather than SVG, canvas, or data joins, with styling provided by an external CSS file.

NNickJolly

85% match

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal VizHub template that renders static text to the page. It displays the string `cars[0].make` inside a `<pre>` element, styled with a dark background and the Ubuntu font from Google Fonts. The visualization uses a plain JavaScript file (`index.js`) that directly sets the text content via `document.getElementById`. It also includes an exported `cars` array parsed from embedded JSON in `cars.js`, though the main script does not reference it. The page loads D3 v5 from a CDN but does not invoke any D3 methods.

Jjeff-lanoue

85% match