Pie Chart v1

<!doctype html>

<html>
  <style>
    line {
      cursor: -webkit-grab;
    }
  </style>
  <body>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    var myData = [
      { id: 'a', count: 33, colour: 'steelblue' },
      { id: 'b', count: 33, colour: 'tomato' },
      { id: 'c', count: 34, colour: 'teal' },
    ];

for (var i = 0; i < myData.length; i++) {
      myData[i].neighbour = myData[(i+1) % myData.length];
    }

var width = 960,
        height = 500,
        size = Math.min(width, height) / 2,
        radius = size - 10

var arc = d3.svg.arc()
        .outerRadius(radius)
        .innerRadius(0);

var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.count; });

var pieData = pie(myData);

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

var stuff = svg.append('g')
      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

var arcsLayer = stuff.append('g').attr('id', 'frederick-d-orcslayer');
    var linesLayer = stuff.append('g').attr('id', 'buffy-t-lineslayer');

// MOUSE STUFF
    var currentSelected = null;

var mouseDown = function () {
      currentSelected = this;

d3.select(window)
        .on('mousemove', mouseMove)
        .on('mouseup', mouseUp);
    };

var mouseUp = function () {
      console.log('mouseup');
      d3.select(window)
        .on('mousemove', null)
        .on('mouseup', null);
      currentSelected = null;
    };

var normalize = function (angle) {
      return (2 * Math.PI + angle ) % (2 * Math.PI)
    };

var mouseMove = function () {
      if (currentSelected) {
        var line = d3.select(currentSelected);
        var firstArc = line.datum();
        var neighbour = firstArc.data.neighbour;
        var secondArc = pieData[myData.indexOf(neighbour)];

var point = d3.mouse(stuff.node());
        var newAngle = normalize(Math.atan2(point[1], point[0]) + Math.PI / 2);

// there must be a better way
        if (firstArc.startAngle > secondArc.endAngle) {
          if (newAngle > secondArc.endAngle && newAngle < firstArc.startAngle) {
            return;
          }
        }
        else if (newAngle  < firstArc.startAngle || newAngle > secondArc.endAngle) {
          return;
        }

firstArc.endAngle = newAngle;
        secondArc.startAngle = newAngle;

if (firstArc.endAngle < firstArc.startAngle) {
          firstArc.endAngle += Math.PI * 2;
        }
        if (secondArc.startAngle >= secondArc.endAngle) {
          secondArc.startAngle -= Math.PI * 2;
        }

refresh();
      }
    };

var refresh = function () {
      var arcs = arcsLayer.selectAll('.arc')
        .data(pieData);

arcs.enter().append('path')
        .attr('class', 'arc')
        .style('fill', function (d) { return d.data.colour; })
        .style('opacity', 0.5);

arcs.attr('d', arc);

var lines = linesLayer.selectAll('line')
        .data(pieData);

lines.enter().append('line')
        .style('stroke', 'darkslategray')
        .style('stroke-width', '3px')
        .attr('x1', 0)
        .attr('y1', 0)
        .on('mousedown', mouseDown);

lines
        .attr('x2', function (d) { return (radius ) * Math.sin( Math.PI - d.endAngle);})
        .attr('y2', function (d) { return (radius ) * Math.cos( Math.PI - d.endAngle);});
    }

refresh();

</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js