index.html

## index.html
<!doctype html>

<html>
  <style>
    line {
      stroke-width: 1.5px;
    }

    body {
      background-color: black;
    }
  </style>
  <body>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    // heavily influenced by http://bl.ocks.org/mbostock/1582075
    var width = 960,
        height = 500;

    var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);

    var centreX = width/2,
        centreY = height/2;

    var length = 200;

    var shuffle = function (array) {
      var m = array.length, t, i;

      // While there remain elements to shuffle…
      while (m) {

        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
      }

      return array;
    }

    var reset = function () {
      hueValues = shuffle(d3.range(0, 360));
      hueAndAngles = d3.range(0, 360).map(function (d) {
        return {
          angle: d,
          hue: hueValues[d]
        };
      });
    };

    var draw = function () {
      var line = svg.selectAll('line')
          .data(hueAndAngles);

      line.enter().append('line');

      line.attr('stroke', function (d) { return 'hsl(' + d.hue + ',50%,50%)';})
          .attr('x1', centreX)
          .attr('y1', centreY)
          .attr('x2', function (d) { return centreX + Math.cos(d.angle * 0.01745) * length; })
          .attr('y2', function (d) { return centreY + Math.sin(d.angle * 0.01745) * length; });
    };


    var quicksort = function (array) {
      var actions = [];

      function partition(left, right, pivot) {
        var v = array[pivot];
        swap(pivot, --right);
        for (var i = left; i < right; ++i) if (array[i] <= v) swap(i, left++);
        swap(left, right);
        return left;
      }

      function swap(i, j) {
        var t = array[i];
        array[i] = array[j];
        array[j] = t;
        actions.push({type: "swap", i: i, j: j});
      }

      function recurse(left, right) {
        if (left < right) {
          var pivot = left + ~~(Math.random() * (right - left));
          actions.push({type: "partition", pivot: pivot});
          pivot = partition(left, right, pivot);
          recurse(left, pivot);
          recurse(pivot + 1, right);
        }
      }

      recurse(0, array.length);
      return actions;
    }

    var sort = function () {
      reset();
      draw();

      actions = quicksort(hueAndAngles.map(function(d) {
        return d.hue;
      })).reverse();

      function step() {
        var intervalId = setInterval(function () {
          var action = actions.pop();
          if (action) switch (action.type) {
            case "partition": {
              step();
              break;
            }
            case "swap": {
              var t = hueAndAngles[action.i].hue;
              hueAndAngles[action.i].hue = hueAndAngles[action.j].hue;
              hueAndAngles[action.j].hue = t;

              draw();
              break;
            }
          }
        }, 100);
      };

      step();
    }

    sort()
  </script>
</html>