Skip to main content
SimilarExport ZIP
100%

Cars Report

✓ Published0🌍 Public
XXin Li
Last edited Mar 19, 2021
Created on Mar 19, 2021
Forked from Hello VizHub

This example demonstrates loading car data and generating a filtered text report of vehicles priced under $2000. It shows a loading message while waiting for the data, then displays each qualifying car as a formatted line with year, make, model, and price. The code uses asynchronous JavaScript with a Promise-based `getCars()` function that simulates a two-second delay, and local ES6 modules (`generateReport`, `formatCar`) to filter and format the data. The report appears in an HTML `<pre>` element, styled with inline CSS.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example displays a text-based report of used cars, showing each vehicle’s year, make, model, and price for models under $2,000. It begins with a “Loading...” message and then renders the filtered results in a large <pre> element after a simulated two-second delay. The code uses JavaScript promises via `getCars`, a `generateReport` function that filters and maps car data, and the `formatCar` helper to compose each line. Data comes from an inline JSON array containing five car records.

YYifei Wang
93% match
Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars, filtering a hardcoded list to display models priced under $2,000. It shows a loading state before using `getCars`, a simulated asynchronous promise with a delay, to fetch the data. The app then uses `generateReport` to filter and format each car with `formatCar`, outputting lines like "2009 Ford F150: $1950" to a `pre` element. The code highlights importing local ES6 modules and using JavaScript promises without external libraries.

Ccindy203cc
93% match
Loading thumbnail…

Cars Report

This example displays a text-based report of used cars, filtered to show only those priced below $2,000 and formatted as a list of year, make, model, and price. The page initially shows "Loading..." while it retrieves the car data, then replaces it with the report. It uses JavaScript's `Promise` and `setTimeout` in `getCars` to simulate a delayed data fetch, and `filter`, `map`, and `join` in `generateReport` to process the data. The HTML `<pre>` element renders the formatted output.

Kkkwyoung
93% match
Loading thumbnail…

Cars Report

This example shows a text-based cars report that filters a hardcoded list of five vehicle objects by price and formats each as a line of text. The code uses JavaScript promises, array methods (`filter`, `map`, `join`), template literals, and ES6 module imports/exports. After a simulated two-second delay, `getCars()` resolves with parsed JSON data, then `generateReport()` selects cars under $2,000 and renders the formatted results in the page’s `<pre>` element, replacing the initial "Loading..." message.

Llujinxuan-fang
93% match
Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price, showing the make, model, year, and cost for vehicles under $2,000. The page initially shows a loading message while a simulated asynchronous data fetch runs via a Promise with a two-second delay. The code uses ES6 modules, `JSON.parse` to load hardcoded car data, and the `Promise` API to handle the delayed response. Once loaded, the `generateReport` function filters, formats, and joins the car entries into a single string displayed in an HTML `<pre>` element.

EEllen Cubbin
93% match
Loading thumbnail…

Cars Report

This example demonstrates a text-based report generator that loads car data asynchronously and filters it by price. The page shows a loading message before displaying a list of vehicles under a $2,000 threshold, formatted with year, make, model, and price. It uses a `getCars` function returning a Promise with a simulated delay, and a `generateReport` module that chains array filters and maps. The `formatCar` utility constructs the output string, while the DOM updates via `textContent` in the main script.

Ssowbalas
92% match
Loading thumbnail…

Cars Report

This example demonstrates a text-based report generator that loads car data asynchronously and filters it by price. The page shows a loading message before displaying a list of vehicles under a $2,000 threshold, formatted with year, make, model, and price. It uses a `getCars` function returning a Promise with a simulated delay, and a `generateReport` module that chains array filters and maps. The `formatCar` utility constructs the output string, while the DOM updates via `textContent` in the main script.

Ssowbalas
92% match
Loading thumbnail…

Cars report

This example displays a text-based report of used cars priced under $2,000, listing each vehicle’s year, make, model, and price. After a simulated two-second delay, the data loads and the report replaces an initial “Loading data” message in the page’s `<pre>` element. The code uses JavaScript promises and `setTimeout` in `getCars.js` to fetch the data, and the `generateReport` function filters and formats the car objects via `Array.filter` and `Array.map`.

SSun-XH
92% match