D3 Examples - Pie layout

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
path {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
  transition: fill 250ms linear;
  transition-delay: 150ms;
}
​
path:hover {
  fill: #999;
  stroke: #000;
  transition-delay: 0;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
d3.csv("universities_data.csv", function(data) {
    data.forEach(function(d) {
      d.Females = +d.Females;
      d.Males = +d.Males;
      d.Total = +d.Total;
      d.Year = +d.Year;
    });
​
    var width = 960,
        height = 500;
​
    var outerRadius = height / 2 - 20,
        innerRadius = outerRadius / 3,
        cornerRadius = 10;
​
    var pie = d3.layout.pie()
        .value(function(d) { return d.Total; })
        .padAngle(.02);
​
    var arc = d3.svg.arc()
        .padRadius(outerRadius)
        .innerRadius(innerRadius);
​
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
    svg.selectAll("path")
        .data(pie(data))
      .enter().append("path")
        .each(function(d) { d.outerRadius = outerRadius - 20; })
        .attr("d", arc)
        .on("mouseover", arcTween(outerRadius, 0))
        .on("mouseout", arcTween(outerRadius - 20, 150));
​
    function arcTween(outerRadius, delay) {
      return function() {
        d3.select(this).transition().delay(delay).attrTween("d", function(d) {
          var i = d3.interpolate(d.outerRadius, outerRadius);
          return function(t) { d.outerRadius = i(t); return arc(d); };
        });
      };
    }
});
​
</script>
    