Asynchronous Queue

100%

Asynchronous Queue

✓ Published0🌍 Public

Last edited Feb 15, 2017

Created on Jan 28, 2012

This example demonstrates asynchronous loading and summation of three remote JSON files using the d3-queue library with a concurrency limit of two. A large headline displays the formula “1 + 2 + 3” and updates the result from “?” to the calculated sum once all files are fetched. The code uses `d3.queue(2)`, `d3.json` deferrals, and an `awaitAll` callback to render the computed total via `document.querySelector`. Data files `1.json`, `2.json`, and `3.json` each contain a single number, which are combined with a `reduce` function.

AI-generated description

This is a demonstration of d3-queue, a tiny library for running asynchronous tasks with configurable concurrency. Here three external JSON files are loaded concurrently using d3-request, and then a ready function renders the sum of their contents:

d3_queue.queue(2)
    .defer(d3_request.json, "1.json")
    .defer(d3_request.json, "2.json")
    .defer(d3_request.json, "3.json")
    .await(ready);

The concurrency of the queue is set to two, such that the first two files (1.json and 2.json) are loaded in parallel. When either of those files has loaded, a third request is made for 3.json. See the API reference for details.

If you’d rather not load these modules separately, they are available as part of D3 4.0.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fetching CSV

This example demonstrates loading three CSV files in parallel using the Fetch API and Promises. It visually presents the result of summing the numbers from each file, updating the text “1 + 2 + 3” with the computed total. The code relies on `fetch` to retrieve each CSV and `d3.csvParse` from d3-dsv to parse the responses, then combines them with `Promise.all`. The final sum is displayed in an HTML heading, showing asynchronous data loading and aggregation.

Mmbostock

72% match

Loading thumbnail…

fresh block

This example demonstrates loading multiple JSON data files concurrently using D3 v5. It shows how to fetch three separate datasets and combine their results into a single array for further processing. The code uses `d3.json()` to request each file and `Promise.all()` to wait for all requests to complete before logging the combined values to the browser console. The visualization itself is not rendered—instead, the example focuses on the data-loading pattern, with the three JSON files containing simple objects with `foo` and `bar` properties. The approach highlights asynchronous data handling in D3 without any chart or graphical output.

GGerardoFurtado

72% match

Loading thumbnail…

fresh block

This example loads three separate JSON data files and uses `Promise.all` to wait for all asynchronous `d3.json` requests to resolve before proceeding. Once all files are fetched, it logs the combined array of parsed data objects to the browser console, demonstrating how to coordinate multiple data loads with D3 v5. The code relies on the native JavaScript Promise API rather than any custom visualization or rendering, and the visible data source is three small JSON files containing simple `foo` and `bar` numeric properties.

GGerardoFurtado

69% match

Loading thumbnail…

fresh block

This example demonstrates how to load and process multiple JSON data files concurrently in a single D3.js application. The visualization itself is not yet rendered; instead, the code focuses on fetching `data1.json`, `data2.json`, and `data3.json` using the `d3.json` method and combining their resolved values with `Promise.all`. The resulting array of parsed JSON objects is logged to the browser console, showing the structure of the data for future use. The code relies on the D3 v5 library for its promise-based asynchronous loading, setting up a foundation for subsequent data binding or chart creation.

GGerardoFurtado

68% match

Loading thumbnail…

d3.queue image loader

This example demonstrates how to load multiple asynchronous resources before rendering content to a canvas, using `d3.queue` to coordinate a text file and an image. The code defines a custom `d3.imageload` function that wraps the HTML `Image` object, then defers both it and `d3.text` for `hola.txt` and `thumbnail.png`. After both complete, it displays a status message and draws the loaded image onto the canvas using the Canvas API’s `drawImage` method. The page’s body is fixed to fill the viewport, and rendering targets a `canvas` element.

PPhilippe Rivière

68% match

Loading thumbnail…

fresh block

This example demonstrates how to load multiple JSON data files sequentially and log their contents to the browser console. It shows three separate data files, each containing an object with `foo` and `bar` properties, and uses `Promise.all` with an array of `d3.json` requests to fetch all files concurrently. The code relies on D3 v5’s promise-based asynchronous loading to handle the file requests, then logs the resolved array of parsed objects. No visualization is rendered; the focus is purely on data loading and promise handling.

GGerardoFurtado

67% match

Loading thumbnail…

Infinite Queue

A queue processes tasks across six parallel slots, each rendering a horizontal bar that animates its width, then collapses and fades before removal. The demo appends div elements via d3.select and transitions, scheduling new tasks with setTimeout to sustain activity. A sentinel task that never invokes its callback keeps the queue running indefinitely, using d3.queue’s defer method. The code highlights the queue’s unbounded memory growth as results accumulate, a trade-off of this infinite-lifecycle pattern.

Mmbostock

64% match

Loading thumbnail…

Combining data from multiple fetches d3

This example demonstrates how to combine data from multiple asynchronous fetches in D3.js. It first loads an overview of Dutch parking facilities using `d3.json` with a CORS proxy, then filters locations by name. It concurrently fetches two specific parking location datasets and uses `Promise.all` to wait for both before processing the results. The code logs the combined response arrays without rendering any visualization, focusing purely on the data-fetching and merging workflow.

Rralfz123

63% match