Modules

100%

✓ Published0🌍 Public

Last edited Mar 25, 2020

Created on Mar 21, 2020

This example demonstrates asynchronous data handling in a JavaScript module system. It shows a large text element displaying the value `123` from the first entry of a hardcoded JSON dataset. The visualization uses the JavaScript `Promise` API and `setTimeout` function to simulate a two-second delay before resolving the data. The `getData` function, exported from a separate module, is imported and its `.then` method updates the HTML element's text content, illustrating a decoupled data-fetching pattern without any charting library.

AI-generated description

Modules code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example demonstrates asynchronous programming patterns using JavaScript Promises, with text updates appearing sequentially in two HTML divs. It shows how a chain of `Promise` objects, created through the `setTimeout` function, executes one after another, updating the visual output after each one-second delay. The visualization uses D3.js v5 through the `select` function to modify text content, while a separate module file exports an unused string constant. The styling relies on the Ubuntu font from Google Fonts with a dark background and light text, though the core interaction is purely timing-based rather than data-driven.

Aasimplesinger

70% match

Loading thumbnail…

Cars Module

This example demonstrates a modular JavaScript application that fetches car data asynchronously and filters it to generate a text report. It shows how to structure code with ES6 modules, using `import` and `export` statements for local files and the D3 library via UNPKG. The app uses a `Promise` with `setTimeout` to simulate a 2-second data fetch, then applies `filter` and `map` operations to display cars priced under $2000 in an HTML `<pre>` element. The source data is embedded as a JSON string in `getCars.js`.

Ooliviawxye

70% match

Loading thumbnail…

Untitled

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.

Ffrancoisfle

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

68% match

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

67% match

Loading thumbnail…

Loading data with fetch,promise, async and await

This example demonstrates how to load external data using modern JavaScript syntax. A page fetches a CSV file containing CSS named colors from a GitHub gist and logs the raw text to the browser console. The code uses the Fetch API and the Promise method `then()`, combined with `async` and `await` inside an asynchronous function to handle the response. No visualization is rendered; the focus is solely on asynchronous data loading and text retrieval.

PPramod Jacob Sam

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

66% match

Loading thumbnail…

promise

This example demonstrates the use of native JavaScript Promises within a D3.js v5 visualization. It logs a message to the console and returns a Promise that resolves, showcasing asynchronous control flow alongside a simple HTML page. The code loads D3 from UNPKG, uses an ES6 module for a text message, and renders the message "Hello VizHub!" in large centered text via CSS styling. The visualization highlights how Promises integrate with D3’s event-driven environment.

Ppei9223

66% match