Infinite Queue

100%

Infinite Queue

✓ Published0🌍 Public

Last edited Oct 31, 2015

Created on Nov 22, 2013

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.

AI-generated description

A little demo of an infinitely long-living queue with 6 parallel slots for tasks. The sentinel task that never invokes the callback prevents the queue from ending, even if there are not any currently-active tasks.

There is a downside to this approach, however, which is that the queue’s internal task results array increases in length by one with each task, even though in this case the queue’s results are never triggered. Thus, be careful using this pattern if you really expect the queue to live indefinitely. Alternatively, it might be worth extending Queue’s minimal API to allow tasks to be processed without tracking their return value.

Similar vizzes

Loading thumbnail…

Table of Progress

Rows of hexadecimal identifiers appear in a table-like list, each with a progress bar that fills from left to right over a random duration before the row collapses and is removed. New rows are created asynchronously, simulating a dynamic queue of tasks. The visualization uses D3.js v3 with chained transitions: `transition().duration().ease("linear")` animates the bar’s width, while a second transition delays the row’s height collapse and removal. Data is generated procedurally via `Math.random()` for durations and creation intervals, with no external dataset.

Mmbostock

68% match

Loading thumbnail…

Asynchronous Queue

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.

Mmbostock

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

64% match

Loading thumbnail…

Animation Benchmark

The animation benchmark renders up to 1,000 bouncing boxes, each moving in a circular path while cycling through background colors and displaying a changing count. A slider controls the number of boxes, and the view updates dynamically as the user adjusts it. The visualization uses d3.timer to drive the animation loop, updating each box’s style properties for position, color, and text. The grid is built with cloned DOM elements via d3.select and node.cloneNode, with enter and exit selections managing box creation and removal. Data consists of d3.range values bound to the box views.

Mmbostock

64% match

Loading thumbnail…

Untitled

A grid of 4,002 small square divs cycles through a continuous color animation, shifting from light gray to steel blue, then to orange, and back to light gray. The page uses D3 v4 with `d3.interpolateRgb` for color transitions and `d3.active` to manage chained, repeating transitions with random delays. The example demonstrates modular JavaScript with ES6 imports, including a promise-based `getCars` function and data filtering from a JSON array, though the grid itself relies solely on D3's selection and transition methods.

Jjesramyep1263

63% match

Loading thumbnail…

Animation Practice

A blue div demonstrates chained D3 transitions, changing background color to green, fading to transparent yellow, then returning to full opacity over three 3-second stages. Using D3 v7’s `transition`, `duration`, and `style` methods within `index.js`, the animation runs on page load via `main()`. The example shows basic sequencing without data, relying on SVG-free DOM manipulation and the `d3.select` API.

Aadventuresenglish.info@gmail.com

63% match

Loading thumbnail…

Cluster layout

A blue square animates from 200 to 500 pixels wide after a one-second delay, then turns red when clicked. The example demonstrates D3 transitions and event handling using `d3.select` and the selection’s `.transition()`, `.delay()`, `.duration()`, and `.on("click")` methods. The page uses D3 version 4.2.2, loaded from a CDN, with inline CSS styling for the square’s dimensions and background color. No data is loaded; the visualization relies entirely on programmatic style changes to illustrate basic interactive animation.

FFrissAnalytics

62% match

Loading thumbnail…

Chained Transitions

Fifty circles, each representing a discrete ordinal value, form a vertical column on the left edge of a 960 by 500 pixel canvas. The animation shows the circles moving horizontally back and forth, creating a chained, wave-like effect as each circle starts its journey after the previous one completes a traversal. The d3.js library (version 2.9.1) drives the motion, using a custom `slide` function to schedule `transition()` calls per circle, with each transition's duration dynamically calculated from the `Date.now()` timestamps to create the sequential delay. The source code is a single HTML file from a gist, with circles styled via CSS.

GGerHobbelt

62% match