Hello VizHub

100%

✓ Published0🌍 Public

Last edited Feb 16, 2019

Created on Feb 16, 2019

This example displays a car price report by parsing an embedded JSON array and formatting each model with its price using JavaScript string templates. The page renders a large, centered text output onto a dark background with Ubuntu typography, using `document.getElementById` to inject the formatted message into the HTML. It relies on the `JSON.parse` method to convert the data and plain DOM manipulation to update the `<pre>` element, with no external visualization libraries.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example demonstrates how to parse and display a small dataset of car listings as plain text. The code uses a custom parser function to filter cars by a price threshold and format each match into a readable line. The result is injected into an HTML `<pre>` element using the DOM API. The page is styled with CSS, and the dataset is defined within the code as a JSON string.

Ssignlog2

82% match

Loading thumbnail…

Cars Report

This example demonstrates how to combine static HTML, JavaScript, and CSS to create a simple report page. It loads data from an inline JSON array of car details (name, model, price, year) and parses it using the native `JSON.parse` method. The page displays a large "Hello" message in a designated `<pre>` element and uses an external ES6 module to export a separate "Hello VizHub!" string, though this module's content is not rendered in the visible output. The code relies on standard DOM methods like `getElementById` and `textContent` to update the page.

SSahilPoonatar

82% match

Loading thumbnail…

Hello VizHub

This example displays a short text report built from a small dataset of cars, filtering entries with a price under 2000 and formatting each record as a line with year, name, and price. The page renders the resulting message in a large, styled font on a dark background. The code imports the `select` function from D3 v5, though it primarily uses plain DOM methods to set the text content, and relies on ES6 modules to organize data and formatting logic in separate files.

HHarry Hackett

81% match

Loading thumbnail…

Hello VizHub

This example displays a text report listing cars with prices above a threshold, generated from a hardcoded array of car objects. It demonstrates importing and using D3.js v5’s `select` method to update the DOM content of a `div`. The code also showcases ES6 module syntax with a separate `myMessage.js` export and array filtering/mapping for report formatting. Styling relies on an external Ubuntu font import and a dark background theme via CSS.

Aasimplesinger

81% match

Loading thumbnail…

Hello VizHub

This example demonstrates a filtered list of used car entries, showing only models priced under $2,000 from a small embedded JSON dataset, by formatting each car’s year, make, model, and price into text lines. The visualization renders plain text into a DOM element via `document.getElementById` and sets `textContent` from a computed message. It uses D3 v5 for potential data manipulation, though the core logic relies on native JavaScript array methods (`filter`, `map`, `join`) and ES6 module imports. Styling is applied through an external Ubuntu font and a dark background via CSS.

Ddvherrera

80% match

Loading thumbnail…

HTML Cars Report

This example demonstrates a stylized HTML report listing two used vehicles with prices, displayed as a static page with oversized monospace text. It shows how VizHub loads D3 through UNPKG, uses an ES6 `import` statement to access the `select` function from D3, and additionally imports a local ES6 module to inject a “Hello VizHub!” message into a separate div. The page structure relies on plain HTML elements, while CSS styling sets the font size and family. The code does not include interactive or data-driven behavior beyond these imports and static content.

Cccocco1

80% match

Loading thumbnail…

Cars Report

This example renders a simple text-based report of car listings, displaying the full parsed dataset directly on the page. It imports car data from a module containing a JSON string, parses it with `JSON.parse`, and assigns the resulting array to a `<pre>` element via `textContent`. The page uses large Ubuntu typography against a dark blue background, with styling defined in CSS. No charting or visualization libraries are used; the focus is on demonstrating basic data import and DOM manipulation within a VizHub project.

DDjan Magno

80% match

Loading thumbnail…

Car Report

This example demonstrates a simple text-based report of cars filtered by price, displaying each vehicle’s year, make, model, and cost. It shows asynchronous data loading with a Promise-based `getCars` function, ES6 module imports and exports, and string formatting via `formatCar`. The code uses `JSON.parse` to parse hardcoded car data and `textContent` to update the HTML `<pre>` element. It highlights modular JavaScript organization in VizHub without any charting or visualization libraries.

Jjlspangl

80% match