Prasad Saodekar

@prasaddsaodekar·3 public vizzes

Cars Report

This example displays the make of the first car in a small, hardcoded JSON dataset. The code defines an array of car objects in `cars.js`, parses it with `JSON.parse`, and then uses DOM manipulation via `document.getElementById` to insert that value into a `<pre>` element. The page uses an external Google Fonts stylesheet and a dark blue, centered text layout, with the displayed message rendered at a very large font size.

Oct 8, 2019

Loading thumbnail…

Cars Report

This example generates a text-based report of cars filtered by price. It imports a static JSON dataset of four cars and applies a custom `generateReport` function to select vehicles under a maximum price, formatting each with the `formatCar` helper as “year make model: $price”. The resulting multi-line string is displayed in an HTML `<pre>` element using vanilla JavaScript via `document.getElementById().textContent`. The project relies on ES module imports and exports, with Rollup bundling the source files.

Oct 8, 2019

Loading thumbnail…

Cars Report

This example displays a plain-text message on a web page, demonstrating the basic structure of a VizHub project. The visualization consists of a single `<pre>` element that is updated with a text string through JavaScript DOM manipulation. The code uses the `document.getElementbyId` method to target the message element and assign its text content. It imports a static dataset of car listings from a JSON string in a separate ES6 module, though the data itself is not rendered visually. The example highlights how modules and the DOM API integrate within the VizHub environment.

Oct 8, 2019