D3: Async Arc Progress Gauge / Meter

View on

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.


Some of these files are from the us-atlas:

  • us.json - make topo/us-10m.json
  • us-congress-113.json - make topo/us-congress-10m.json

Others are from the world-atlas:

  • world-50m.json - make topo/world-50m.json
  • world-110m.json - make topo/world-110m.json
View get-selected-text
var getSelectedText = function() {
var txt = "";
if (window.getSelection) {
txt = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
txt = document.selection.createRange().text;
return txt;
View color-palettes
View nodejs-express-cors.js
// Express CORS middleware.. so much easier than trying to get Restify to work
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Accept, Origin, Referer, User-Agent, Content-Type, Authorization');
// intercept OPTIONS method
if (req.method === 'OPTIONS') {
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
.graticule {
fill: none;
stroke: #777;
stroke-opacity: .5;
stroke-width: .5px;
View quicksort.js
// quicksort using new arrays is easy, but surprisingly, there weren't too many examples
// in javascript of in-place quick sort...
// the outer function is simply just a wrapper that copies the original array;
// you can just use lines 12-37 if preserving the original array isn't important
function quickSortInPlace(unsortedArray) {
var unsorted = unsortedArray.slice(); // copy the original array

D3: Open Hours

view on
github repo

D3 visualisation utilising D3's text/CSV to read/parse a CSV file with restaurant information and display which restaurants are currently open.

Users can drag the time (red line) to display restaurants open at other hours.

git filter-branch --env-filter '
CORRECT_NAME="Your Correct Name"