Pie layout

<!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));

</script>

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

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