Untitled

100%

✓ Published0🌍 Public

Last edited Feb 24, 2021

Created on Feb 24, 2021

This example demonstrates asynchronous data loading and dynamic text rendering on a web page. It simulates fetching car data from a JSON array via a promise that resolves after a two-second delay, then filters the results by price and displays them as a formatted list. The code uses JavaScript ES6 modules, `import` and `export` statements, and the DOM API to update the HTML content.

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…

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

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

80% match

Loading thumbnail…

Untitled

This example demonstrates loading and processing JSON data representing car listings, filtering them by price, and formatting them into a plain-text report. It uses JavaScript modules with `export`/`import` statements and Promises to simulate asynchronous data retrieval. The code also includes a separate array of U.S. city data and logs the number of entries to the console. No visualization library is used; the focus is on functional programming patterns with `filter`, `map`, and `join` on arrays, as well as object destructuring.

Jjesramyep1263

79% match

Loading thumbnail…

Cars Report

This example demonstrates how asynchronous data fetching and modular JavaScript can be used to generate a simple text-based report of used cars. After a two-second simulated delay, a list of cars priced under $2,000 is displayed on the page. The code relies on native ES modules for importing and exporting functions, the `Promise` API with `setTimeout` for the delayed data retrieval, and `JSON.parse` to convert an embedded JSON string into an array of car objects. The final output is rendered into a `<pre>` element using the DOM method `textContent`.

Ffra-alaimo

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

77% match

Loading thumbnail…

Untitled

This example imports a small array of car objects from an ES6 module and displays the name of the first item in an HTML element. The data is parsed from a JSON string literal using `JSON.parse` and rendered as text content via `document.getElementById`. The page uses a large Ubuntu font from Google Fonts with a dark background, and the bundled output is loaded through `bundle.js`. No external visualization libraries are involved, as the focus is purely on data extraction and DOM text insertion.

MMukund Khandelwal

77% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that renders a text message, which is loaded asynchronously from a static array of car data. It shows how to fetch and display data using a simple Promise-based API, with `getCars` simulating a two-second delay. The code uses plain JavaScript with `document.getElementById` to update the DOM, and the data is defined as a JSON string that is parsed into an array. The visualization itself is just text output, with no graphical or charting libraries involved.

MMiguel Martínez

77% match

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript tutorial that asynchronously loads car data, filters it by price, and displays a formatted text report in the browser. It shows how to structure code using ES6 modules with `export` and `import` statements, and how `JSON.parse` converts embedded JSON data from the `getCars.js` file. The visualization relies on `Promise` and `setTimeout` to simulate a delayed API response, and `document.getElementById` to update the page’s `<pre>` element with the final list of cars priced under $2,000. The user interface is minimal, consisting only of text output.

OOrangTang

77% match