All examples By author By category About

kenfdev

D3 Arc Progress Gauge / Meter (for d3-js group)

D3: Async Arc Progress Gauge / Meter

View on bl.ocks.org/cmdoptesc/e9b3bfc6f43b4bd237e2

Forked from Bostock's original Progress Events example to answer Rex X's post on the d3-js group:

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

forked from cmdoptesc's block: D3 Arc Progress Gauge / Meter (for d3-js group)