Progress Events
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 descriptionThis 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.