Untitled

100%

✓ Published0🌍 Public

Last edited Dec 29, 2020

Created on Dec 29, 2020

This example demonstrates the use of ES6 modules and D3 imports in VizHub, filtering a small dataset of cars from an embedded JSON string and displaying a formatted report. The code imports the `cars` data and a `generateReport` function from local modules, which filters cars under a price threshold and maps each to a formatted string via `formatCar`. The resulting message is written into a `<pre>` element using the DOM API. It showcases local module composition and data transformation without any external visualization library beyond standard JavaScript.

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

86% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, filtering entries by price and formatting each match into a readable line. It shows how VizHub projects can load D3 via UNPKG and use ES6 module imports to organize code. The data is embedded as JSON and fetched asynchronously with a custom `getCars()` promise, while `generateReport()` applies a price filter and `formatCar` transforms each car object into a string. The output is displayed in a `<pre>` element, with a loading message shown until the data arrives.

Ooptimizeresume

86% match

Loading thumbnail…

Cars Report

This example shows a text-based report of car listings filtered by price. It demonstrates asynchronous data loading and ES6 module imports in VizHub. The code uses `getCars()` to return a promise that resolves after two seconds, then applies `generateReport` with a filter and formatting via `formatCar`. D3 is loaded from UNPKG, and local modules handle data parsing and report generation. The output renders as a plain text message in an HTML element.

PPioustu

86% match

Loading thumbnail…

Cars report

This example demonstrates how to load and display data from an external ES6 module in a VizHub project. It imports a JSON array of car objects from `carsreport.js` and renders the first car’s make (Honda) as plain text inside a `<pre>` element. The visualization uses standard JavaScript `JSON.parse` and DOM manipulation via `document.getElementById`, with D3 loaded from UNPKG as a dependency. The page structure lives in `index.html`, while styling is defined in `styles.css`.

Mmshah151

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

86% match

Loading thumbnail…

Data Visualization D3.js

This example demonstrates how to build a simple data report using D3.js and ES6 modules in the VizHub environment. It displays a text message listing cars priced under $2,000, filtered from a local JSON dataset and formatted with a custom helper function. The code loads D3 from a CDN via UNPKG, imports local modules like `cars` and `formatCar`, and updates the DOM using `document.getElementById` to set text content.

Hhikmet.demirci@gmail.com

86% match

Loading thumbnail…

Cars Report

This example renders a text-based report of used cars, showing the power of VizHub to load D3 from UNPKG and modularize code with ES6 `import` statements. It displays a list of cars under a $2000 price threshold, with each entry formatted as "year make model: price." The code relies on a local `generateReport` module that filters and formats the data, a `getCars` module that parses embedded JSON and returns a Promise with a simulated 2-second delay, and an `index.html` with a `<pre>` element updated via the DOM API.

JJustin

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

85% match