Skip to main content
100%

Progress Events

✓ Published0🌍 Public
Mmbostock
Last edited Aug 23, 2019
Created on Sep 19, 2012

This example visualizes the progress of an asynchronous request as a circular gauge with a dark foreground arc filling a gray background track, alongside a percentage label. The data is fetched from a GitHub API endpoint, and the gauge animates smoothly by interpolating progress values. The code uses `d3.json` to create a request object, registers a "progress" event listener with `.on`, and updates the arc by setting its end angle through `arc.endAngle`. The process runs in SVG, with animation handled via `d3.transition` and `d3.interpolate`. Once the request completes, the gauge scales down via a transition.

AI-generated description

This example demonstrates how to display the progress of an asynchronous request. Rather than saying d3.json(url, callback), use d3.json(url) to first create the request object, then register a "progress" event listener with xhr.on before starting the request with xhr.get.

You can also use this pattern to listen to "load" and "success" events separately. For example:

var xhr = d3.json(url)
    .on("progress", function() { console.log("progress", d3.event.loaded); })
    .on("load", function(json) { console.log("success!", json); })
    .on("error", function(error) { console.log("failure!", error); })
    .get();

This pattern also lets you cancel in-progress requests using xhr.abort, register custom headers with xhr.header, and even change the HTTP method and request body using xhr.send.

gpl-3.0 Licensed

Similar vizzes