Promise

100%

✓ Published1🌍 Public

Xxychen0612.cs09@nycu.edu.tw

Last edited Sep 14, 2023

Created on Sep 14, 2023

This example demonstrates asynchronous data loading and report generation in a browser. It shows a loading message that updates to a formatted text report after a two-second delay, simulating a network request. The code uses JavaScript ES6 modules with `import`/`export` syntax, a custom `Promise` wrapper around `setTimeout` to fetch car data, and dynamic string construction. It highlights how VizHub loads D3 via UNPKG, though the visible workflow relies on local module functions like `getCars`, `formatCar`, and `generateReport` to process and display car prices.

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…

Hello VizHub

This example demonstrates asynchronous data loading and text generation. It fetches a hardcoded JSON array of car objects using a custom Promise-based `getCars` function, then filters and formats entries under a price threshold with `generateReport` and `formatCar`, displaying the result in a `<pre>` element. The page initializes with a “Loading….” message, then updates to the report. It uses ES6 modules, template literals, and D3 v5 from a CDN, though no D3-specific visualization APIs are invoked.

NNarong

86% match

Loading thumbnail…

Untitled

This example demonstrates an asynchronous data-loading pattern where a loading message is displayed until car data arrives from a simulated API call. It uses `getCars()`, which returns a Promise that resolves after a 2-second delay with a hardcoded JSON array of car objects. The `generateReport` function filters cars by price and formats each into a readable string, then displays the result in an HTML element. The visualization relies on native JavaScript Promises, `JSON.parse`, and DOM manipulation via `document.getElementById`, with no D3 or other visualization libraries used.

Ppoyomon

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

83% match

Loading thumbnail…

Hello VizHub

This example demonstrates the core workflow of a VizHub project, showing how a simple web page can load data, process it, and display a formatted text report. The page initially displays "Loading..." and then presents a list of cars priced under $2,000 after a simulated two-second delay, using `getCars()` with a Promise and `setTimeout`. The code leverages ES6 modules, including `formatCar.js` and `generateReport.js`, to filter and format car data, while `index.html` and `styles.css` define the visual presentation with a large Ubuntu font and dark blue background.

Ppothurisathish

83% match

Loading thumbnail…

test

This example demonstrates asynchronous data loading and text generation by fetching a hardcoded JSON array of used cars and displaying a filtered report of models under a price threshold. The page initially shows a loading message, then updates the DOM with formatted car details after a simulated two-second delay using a Promise. The code relies on native JavaScript features like `JSON.parse`, `setTimeout`, and ES6 modules, while the report formatting is handled by custom functions `formatCar` and `generateReport`. Styling is applied via a CSS file with an imported Google Font, and the visualization is presented as large plain text in a `<pre>` element.

Hhxiao-git

83% match

Loading thumbnail…

start

This example demonstrates a simple asynchronous data-loading workflow in a VizHub project. It shows a “loading…” message that is replaced only after a simulated two-second delay, using a promise returned by the `getCars` function. The code exercises local ES6 module imports, importing `getCars` from a separate file, and imports D3 via a CDN script tag in the HTML. The loaded car objects are logged to the console, while the initial message element is updated using plain DOM text assignment.

Jjingwg3@163.com

83% match

Loading thumbnail…

Hello VizHub

This example demonstrates how to load and display a list of car records in the browser. The code uses a simulated asynchronous data source via `getCars`, which returns a JavaScript Promise after a two-second delay, and formats the data with custom ES6 modules (`formatCar` and `generateReport`). The final report is rendered as plain text into a `<div>` using the native `document.getElementById` method, while D3 v5 is loaded but only used for its `select` import. The page’s dark blue background and large Ubuntu font come from the linked CSS file.

Llareyes72

82% match

Loading thumbnail…

HTML

This example demonstrates asynchronous data loading and text generation in a web page. It fetches a hardcoded car dataset using a Promise-based `getCars()` function, then filters and formats the results with `generateReport()` and `formatCar()` to display affordable vehicles (under $2,000) in the DOM. The visualization relies on ES6 module imports for local files (`formatCar.js`, `generateReport.js`, `getCars.js`) and renders plain text to a `<pre>` element. D3 is loaded via UNPKG, though the current code uses no D3-specific functions.

Xxychen0612.cs09@nycu.edu.tw

82% match