start

100%

✓ Published0🌍 Public

Last edited Sep 13, 2022

Created on Sep 13, 2022

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.

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 loading asynchronous data and updating a webpage’s content once the data arrives. The page initially shows the text "Loading..." and then, after a five-second delay, displays a specific car year from a hardcoded JSON array of car objects. The JavaScript uses a custom ES6 module that exports a `getCars` function returning a Promise, which simulates a network request with a timeout. The HTML page styles the large output text using CSS with the Ubuntu font, while the D3.js library is included via a CDN link.

CChia-KaiYang

85% match

Loading thumbnail…

Promise

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.

Xxychen0612.cs09@nycu.edu.tw

83% match

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

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

81% match

Loading thumbnail…

Hello VizHub

This example demonstrates a simple asynchronous data-loading and reporting workflow using D3.js v5. It fetches a hardcoded JSON array of car objects via a custom `getall()` promise, filters cars priced under $2000, formats each record with `formatCars`, and joins the results into a report displayed in the page’s message div. The code uses D3’s `select()` to update the DOM text initially with “loading…”, then replaces it with the generated report after a five-second delay. Styling relies on an external Ubuntu font and a dark theme from `styles.css`.

Aasimplesinger

80% match

Loading thumbnail…

Hello World

This example demonstrates how to load and parse a small JSON dataset of car information and render the first car’s make in the browser. It shows the basic structure of a VizHub project, including importing local ES6 modules (`cars`, `myMessage`) and the `select` function from D3 v5, which is loaded via a CDN. The code also includes commented-out examples of DOM manipulation with `textContent` and D3’s selection API, while the HTML page contains a `<pre>` element that would display the output.

Kkippspan

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

79% match

Loading thumbnail…

Cars report

This example demonstrates asynchronous data loading and D3.js v5. It displays a "Loading ..." message before fetching a hardcoded JSON array of car records via a custom `getCars` function. The code imports from d3 and local ES6 modules, though the visible output ultimately shows a static "Hi!!!!" message, with commented-out logic for filtering and formatting car data by price.

CChangbeom Shim

79% match