Hello VizHub

100%

✓ Published0🌍 Public

Last edited Jul 1, 2019

Created on Jul 1, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Hello VizHub

This example demonstrates how to display a filtered list of used cars using D3.js and ES6 modules. It imports car data from a local module, filters for vehicles priced under $2000, and formats each entry into a readable string. The page renders the text output using D3’s `select` and sets the content of a `<pre>` element with styled CSS. The data is defined as JSON in `cars.js` and parsed with `JSON.parse`.

Mmadguy3000

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

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

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

82% match

Loading thumbnail…

Hello VizHub

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.

PPiotrekW2

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

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

82% match