Introducing d3.layout.pie by curran

This is a small code example that shows what d3.layout.pie(). It adds properties including “startAngle”, “endAngle” for the slices of a pie chart. This is example 24 from the screencast Splitting Charts.

MIT License

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  <body>
    <script>

      var sliceSizeColumn = "population";
      var pie = d3.layout.pie();

      function render(data){

        pie.value(function(d) {
          return d[sliceSizeColumn];
        });

        var pieData = pie(data);

        d3.select("body").append("pre")
          .text(JSON.stringify(pieData, null, 2));
      }

      function type(d){
        d.population = +d.population;
        return d;
      }

      d3.csv("religionWorldTotals.csv", type, render);

    </script>
  </body>
</html>

religionWorldTotals.csv

religion,population
Christian,2173100000
Muslim,1598360000
Unaffiliated,1126280000
Hindu,1032860000
Buddhist,487320000
Folk Religions,404890000
Other Religions,57770000
Jewish,13640000