D3: Async Arc Progress Gauge / Meter
The progress meter is based on the number of files that have downloaded. In our case,
numberOfFiles is set to 20.
We then generate 20 random durations between 0 - 3000ms to simulate download times, and call
setTimeout using the durations. Each timer then calls
update, which increments the number of files downloaded, increasing the progress arc with a tweening function.
If you open up the console (CMD + OPT + J / CTRL + SHIFT + J), you can see the async events firing.
Also, it should be noted that unlike Bostock's earlier arc tween example, we're not following the usual D3 conventions by binding data to any SVG elements and updating the data.
al lin, jul 2015