Cars Report [complete]

100%

Cars Report [complete]

✓ Published0🌍 Public

Last edited Nov 15, 2020

Created on Nov 14, 2020

Forked from Hello D3

This example demonstrates a text-based report of cars filtered by price, displaying each car’s year, make, model, and cost in a large, preformatted HTML element. The page initially shows “Loading...” and then, after a simulated two-second delay, renders the filtered list. The code uses JavaScript promises with `getCars` to fetch a hardcoded JSON array, and `generateReport` with `formatCar` to filter and stringify the data. It relies on plain DOM manipulation via `document.getElementById` to update the message element, with no external visualization libraries.

AI-generated description

From tutorial video >>> https://www.youtube.com/watch?v=_8V5o2UHG0E&feature=youtu.be

If you came from the video, you have to add "./" in front of the file names to make them work!!

A demonstration of how to start using D3 version 6.

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Cars Report

This example shows a text-based report of cars filtered by price, displaying each car’s year, make, model, and cost as formatted lines. It first presents a “loading…” message, then asynchronously loads a hardcoded JSON dataset via a Promise and setTimeout in `getCars.js`. The report is generated using array methods (`filter`, `map`, `join`) in `generateReport.js`, with the `formatCar` function composing each line. The React app updates the DOM’s text content directly through `document.getElementById`.

JJaKokosz

95% match

Loading thumbnail…

Cars Report

This example displays a list of cars filtered by price, showing each vehicle’s year, make, model, and cost as plain text. It fetches demo data from a local JSON array via a simulated asynchronous `getCars` promise, then applies a filtering and formatting pipeline using `generateReport` and `formatCar`. The React-based view updates a DOM element directly with `document.getElementById`, replacing an initial “Loading…” message with the final report.

ZZackaz

94% match

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars filtered by price, showing the car year, make, model, and price. It initially displays a "Loading..." message while fetching data asynchronously via a Promise from `getCars`. Once the simulated two-second delay resolves, it generates a filtered list using JavaScript array methods (`filter` and `map`), formats each car with a custom `formatCar` function, and updates the DOM's `textContent` in an HTML `<pre>` element. The report only includes cars under $2,000, selected from a hardcoded JSON array parsed with `JSON.parse`.

Mmp7090

94% match

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price, showing each car’s year, make, model, and cost on a large HTML `<pre>` element. It fetches car data asynchronously from a hardcoded JSON array after a two-second delay, then filters vehicles under $2,000 and formats them into a list. The code uses JavaScript Promises via `getCars()`, string template literals in `formatCar`, and the array methods `filter`, `map`, and `join` within `generateReport`, with React not actively used despite being listed in the framework metadata.

KKenneth Goh

94% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, filtering results by price and formatting each entry as a single line with the year, make, model, and cost. The page initially displays “Loading,” then renders the report after a simulated two-second delay using a Promise from the `getCars` function. Built with React and vanilla JavaScript, it relies on the `formatCar` and `generateReport` modules, and updates the DOM by setting the `textContent` of a pre-existing `<pre>` element. The data originates from a hardcoded JSON array parsed via `JSON.parse`.

LLyncoln

94% match

Loading thumbnail…

Cars Report

This example displays a list of cars filtered by price, showing each vehicle’s year, make, model, and cost as plain text. The page initially shows “Loading...” while a simulated asynchronous call to `getCars()` resolves after two seconds. The `generateReport` function filters the JSON data for cars under $2,000 and formats each entry using `formatCar`, which constructs the output string. The result is written into a `<pre>` element via the DOM API, with styling applied through inline CSS in the HTML file.

XXinya Gao

93% match

Loading thumbnail…

Cars Report

This example shows a text-based report of cars filtered by price, displaying each car’s year, make, model, and price in a large, left-aligned `<pre>` element. The page first shows “Loading...”, then, after a simulated 2-second delay from a Promise, renders the report for cars priced under $2,000. It uses React-style ES modules (`getCars`, `formatCar`, `generateReport`) to parse JSON data and filter with `Array.filter` and `Array.map`. The visualization is purely typographic, with no charts or graphics.

BBaraneedharan N M

93% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, filtered by price and formatted as a readable list. It begins with a "Loading..." message while the data loads. The code uses the React starter framework, though the core logic relies on JavaScript promises from `getCars` and string manipulation via `formatCar` and `generateReport`. The data is embedded as JSON and parsed with `JSON.parse`, then rendered into the DOM via `textContent`.

KKarkG

93% match