D3.js donut chart

by rohdz

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 460px;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

JavaScript

var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245],
};



var width = 400,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 75)
    .outerRadius(radius - 65);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); 
                                 })
    .attr("d", arc)
      .style("cursor", "pointer");

var rectangle = svg.append("rect")
                           .attr("x", 100)
                           .attr("y", 100)
                         .attr("width", 250)
                          .attr("height", 100)
.attr("color", 'black')
;



// Define drag beavior
      var d = [{ x: 20, y: 20 }];

        var g = d3.select("body").select("svg").data(d).append("g").attr("transform", function (d) { return        "translate(" + d.x + "," + d.y + ")"; })
         .call(onDragDrop(dragmove, dropHandler));

    g.append("rect")
    .attr("width", 140)
    .attr("height", 40)
    .attr("stroke", "red")
    .attr("fill","transparent")
    .attr("x", "20" )
    .attr("y", "20")

    
  function onDragDrop(dragHandler, dropHandler) {
        var drag = d3.behavior.drag();

    drag.on("drag", dragHandler)
    .on("dragend", dropHandler);
    return drag;
    }

 function dropHandler(d) {
        alert('dropped');
    }

  function dragmove(d) {
            d.x += d3.event.dx;
            d.y += d3.event.dy;
            d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
  }