nightjean7

@nightjean7·5 public vizzes

HTML Cars Report

This example presents a minimal HTML cars report page that displays a large heading and a short list of placeholder items. It uses plain HTML markup with an embedded stylesheet, setting the body font size to six em units via CSS. The visualization does not include any JavaScript libraries, charts, or interactive elements; it simply renders static text content defined directly in the document structure.

Mar 10, 2020

Loading thumbnail…

cars reports

This example demonstrates a loading and reporting workflow for car listings. It displays a text report of cars priced under a user-defined threshold, filtering from a hardcoded JSON dataset. The page initially shows a “loading...” message while `getCars()` simulates a five-second asynchronous delay. Once loaded, `generateReport` filters the cars by price and formats each entry using `formatCar`, which outputs a line with the year, make, model, and price, rendered inside a `<pre>` element.

Mar 10, 2020

Loading thumbnail…

Car Reports

This example displays a text-based car report, filtering a static list of vehicles to show only those priced below a specified threshold. The application uses React and a promise-based asynchronous data loader to simulate fetching car data. It formats each car into a readable string with the `formatCar` function, and then generates the final report using `generateReport`. The output is rendered into a pre-formatted HTML element, immediately displaying a static "Hello World" placeholder before the report loads.

Mar 6, 2020

Loading thumbnail…

cars reports

This example demonstrates a simple text-based report of used car listings, filtering a small inline dataset by price and formatting each entry into a readable line. The code uses JavaScript modules (`cars.js`, `formatCar.js`, `generateReport.js`) to parse JSON with `JSON.parse`, filter the array, map cars into formatted strings, and join them with newlines. The generated report is displayed in a `<pre>` element via `document.getElementById` and `textContent`, showing only cars priced below 3000 dollars.

Mar 6, 2020

Loading thumbnail…

Car Reports

This example displays a simple car report, listing information about three vehicles directly embedded in the code as a JSON string. The page shows a single HTML element, a preformatted `<pre>` tag with large text, which is intended to display the car data. The visualization uses React as the framework, with the main logic in `index.js` that imports the parsed car data from `cars.js` and accesses the DOM element via `document.getElementById`. The current code only logs the element to the console and does not render any visual content.

Mar 6, 2020