Skip to main content
SimilarExport ZIP
100%

Fork of Cars Report

✓ Published1🌍 Public
Ppuru001
Last edited Apr 26, 2022
Created on Apr 26, 2022
Forked from Cars Report

This example displays a text-based report of cars filtered by price. It shows how to compose local ES6 modules and import them into a main script, with `generateReport` filtering a hardcoded `cars` array and mapping each entry through `formatCar` to produce formatted strings. The resulting message is rendered into a `<pre>` element using `document.getElementById`. It relies on D3 v5 loaded via UNPKG, though the report itself uses no D3-specific APIs, instead demonstrating modular JavaScript organization in a VizHub environment.

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…

Fork of Fork of Cars Report

This example demonstrates how to build a simple, text-based report from a static dataset of cars using ES6 modules. It loads a hardcoded JSON array of car objects via a local async function and filters them by price, formatting each match into a readable line with the `formatCar` helper. The report is generated using the `generateReport` function and displayed inside a `<pre>` element. The code shows how to use `import`/`export` for both local modules and the D3 library, though D3 itself is not used in the logic.

Ppuru001
94% match
Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price, rendering each matching vehicle as a formatted line with year, make, model, and cost. The visualization uses D3 v5 loaded via UNPKG, along with local ES6 modules for data parsing and report generation. The `cars.js` module defines an inline JSON array, while `generateReport` filters and maps entries using `formatCar`. The resulting message is inserted into a `<pre>` element through `document.getElementById`.

SShankar Ghimire
90% match
Loading thumbnail…

Fork clear

This example demonstrates a simple data-report generator that filters a static array of car listings and displays the results as formatted text in a large HTML `<pre>` element. It showcases VizHub’s support for local ES6 modules and external D3 loading via UNPKG, though the visible behavior relies on `JSON.parse` and string manipulation with `filter`, `map`, and `join` from the `cars.js` and `generateReport.js` modules. The page uses `document.getElementById` to update the message element dynamically with the generated report, highlighting modular code organization.

Wwachirar
90% match
Loading thumbnail…

HTML Cars Report

This example demonstrates how to build an HTML-based report using ES6 modules with D3 v5 and VizHub. A static array of car objects is loaded asynchronously through a Promise, filtered by price, and formatted into text using `formatCar` and `generateReport` functions. The report renders in a `pre` element, displaying only cars below a price threshold, while the page also includes hardcoded list items with CSS highlighting. The code imports D3 via UNPKG and uses local module imports like `./getCars` and `./generateReport`.

Ppuru001
89% match
Loading thumbnail…

Cars Report

This example presents a text-based report of car listings, filtering and formatting a small dataset of three vehicles. It demonstrates modular ES6 JavaScript code organization, with separate files for data, formatting, and report generation. The visualization uses D3 v5 loaded via UNPKG, though the core logic relies on native array methods like `filter` and `map` rather than D3-specific APIs. The `generateReport` function filters cars by price and joins formatted strings into a single message displayed in a `<pre>` element, showcasing how to combine local modules with a CDN-loaded library.

BBartłomiej Remlein
89% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a data-report generator that filters a small JSON array of car records by price and displays the matching entries as formatted text in the page. The visualization relies on D3 v5, accessed via UNPKG, using the `select` API to set the text content of a `#message` div. The code also showcases local ES6 module imports, with `generateReport.js` filtering cars and `formatCar.js` formatting each record with year, make, model, and price.

RRobertWell
88% match
Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript module pattern that generates a text-based car report, filtering vehicles under a specified price and formatting each entry as a string line. The visualization shows a loading message, then a list of five cars with their year, make, model, and price, sourced from an embedded JSON array. The code uses ES6 module exports and imports (`export const formatCar`, `import { generateReport }`), a `Promise` with `setTimeout` to simulate asynchronous data fetching, and DOM manipulation via `document.getElementById` to update the displayed text. The rendering is plain text within a `<pre>` element, styled with large font size.

Rrohitdiwadkar
88% match
Loading thumbnail…

Fork of Hello VizHub 3524

This example shows a simple text-based car report that loads a hardcoded JSON dataset and displays a filtered list of cars under a specified price. It demonstrates asynchronous data loading with a Promise-based `getCars` function and ES6 module imports across local files. The code uses D3 via UNPKG only for import, while the report generation relies on native JavaScript array methods like `filter`, `map`, and `join`. The final output renders as formatted text in an HTML `<pre>` element using vanilla DOM manipulation.

Qqliu50@fordham.edu
88% match