Fork clear

100%

✓ Published0🌍 Public

Last edited Jan 18, 2021

Created on Jan 18, 2021

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.

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 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.

Ppuru001

90% 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

89% 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

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

87% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple D3.js application that fetches a hardcoded list of cars and generates a text report of models priced under $2,000. It uses a Promise-based `getCars` function to simulate a delayed data load, then renders the filtered and formatted car details into an HTML `<pre>` element. The visualization highlights modular ES6 imports, including a local `formatCar` utility and a `generateReport` function that chains `filter` and `map` on the data.

KKevin McMorrow

86% match

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript-based report generator that filters a static array of car objects and displays them as formatted text. The page loads with a "Loading..." message, then retrieves car data from a hardcoded JSON string using the `getCars` function, which simulates an asynchronous delay with `setTimeout`. The `generateReport` module filters out cars priced under $3000, formats each entry via `formatCar` to include year, make, model, and price, and joins them into a newline-separated list that populates the pre element in the HTML. No external visualization libraries are used; the rendering relies solely on native JavaScript and DOM manipulation.

Aannadehtiarova

86% match

Loading thumbnail…

Fork of Cars Report

This example demonstrates a car-report generator that filters a set of car listings by price and formats the results as text. It fetches JSON data from a `fetch` API call to a local server, then uses JavaScript array methods (`filter`, `map`, and `join`) to process and display the report. The code relies on custom modules (`formatCard` and `generateReport`) and a mock data promise (`getCars`) that simulates a delayed response. The final output is rendered into an HTML `<pre>` element.

Nnecat1

86% match

Loading thumbnail…

Fork of Cars Report

This example demonstrates how JavaScript objects, arrays, and modules can build a simple text-based car report. It filters a hardcoded JSON dataset of five cars by price, formats each qualifying entry with the `formatCar` function, and displays the results in a large HTML `<pre>` element. The code uses `Promise` and `setTimeout` in `getCars.js` to simulate an asynchronous data fetch, while `generateReport.js` chains array methods like `filter`, `map`, and `join`. The visualization is purely textual, updating the page from "Loading..." to the final list after a two-second delay.

WWeiyiDeng

86% match