Hello VizHub

100%

✓ Published1🌍 Public

Last edited Aug 18, 2019

Created on Aug 18, 2019

This example demonstrates a minimal data-visualization setup using VizHub, where a static JSON array containing a single motorcycle object is parsed and displayed. The code defines the data in `complete.js`, exports it as `newtube`, and then uses `index.js` to extract a property value and render it as text. The message is injected into the HTML page via `document.getElementById` and the `textContent` API, targeting a `<pre>` element styled with large font size. No external visualization libraries are used; the focus is on basic data parsing and DOM manipulation.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal data-driven text visualization. It shows a single motorcycle record from an inline JSON dataset, displaying the name field as large text on a blank page. The code parses the JSON with `JSON.parse` in `complete.js`, then imports the parsed object into `index.js` via a module import. Finally, it uses the Document Object Model (`getElementById`) to set the text content of a preformatted element, producing a straightforward output without external libraries or rendering layers.

Zzerkhi

90% match

Loading thumbnail…

Hello VizHub

This example demonstrates a static text display that prints the string "newtube.name" in a large font inside an HTML page. It imports a JSON array of motorcycle data from a separate module, parses the constant `bike7`, and exports it as `newtube`, though the visualization does not render or process this dataset. The page uses a `<pre>` element with inline styling for presentation, and JavaScript's `document.getElementById` to set the text content. The code relies on standard ECMAScript module imports and the native JSON API, with no additional visualization libraries like D3 or Canvas involved.

Zzerkhi

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

84% match

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

81% match

Loading thumbnail…

Hello VizHub

This example displays a static greeting message, "hi," centered on a dark blue background using large Ubuntu typography. The visualization serves as a minimal demonstration of VizHub's project structure, with the message imported from a separate JavaScript module and rendered into an HTML `<pre>` element. It includes a hardcoded JSON array of used car listings, though the code does not currently visualize this data. The implementation relies on standard JavaScript module imports and DOM manipulation via `document.getElementById` rather than any external charting libraries.

KKwadwo 'Que' Amankwa

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

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

79% match

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal VizHub project that displays the text “Halo!” on a dark blue background. It imports vehicle data from a JSON file using ES6 modules in `cars.js` and renders a static message through `document.getElementById`. The styling uses an external Google Fonts stylesheet for the Ubuntu typeface, while D3 v5 is loaded via CDN in `index.html`. The visualization is purely presentational, with no interactive or data-driven rendering logic beyond the parsed car dataset.

ZZubair Abubakar

79% match