D3 Examples - Radial Bar Chart

Radial Bar Chart
This is possible with D3, but I'm not sure it's a good visualization technique. The values for each slice to not correspond to the area they occupy on the screen. The slices that are farther from the center will occupy more area per unit of value, so perceptually it actually distorts the data, rather than presenting it clearly.
xxxxxxxxxx
 
<!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>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>
    
      .axis text {
        font-family: 'Open Sans', sans-serif;
        font-size: 32pt;
      }
​
      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
​
      .color-legend text {
        font-family: 'Open Sans', sans-serif;
        font-size: 29pt;
      }
​
    </style>
  </head>
  <body>
    <script>
​
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 11, top: 33, right: 377, bottom: 88 };
      var radiusMax = 180;
​
      var xColumn = "name";
      var sliceSizeColumn = "population";
      var colorColumn = "religion";
​
      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
​
      var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");
      var pieG = g.append("g");
​
      var colorLegendG = g.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate(595, 20)");
​
      var xScale = d3.scale.ordinal().rangePoints([0, innerWidth]);
      var colorScale = d3.scale.category10();
      
      var angleScale = d3.scale.linear();
​
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .outerTickSize(0);
​
      var pie = d3.layout.pie();
      var arc = d3.svg.arc();
​
      var colorLegend = d3.legend.color()
        .scale(colorScale)
        .shapePadding(3)
        .shapeWidth(40)
        .shapeHeight(40)
        .labelOffset(4);
​
      function render(data){
​
        xScale.domain(data.map( function (d){ return d[xColumn]; }));
        colorScale.domain(data.map(function (d){ return d[colorColumn]; }));
        pie.value(function(d) { return d[sliceSizeColumn]; });
​
        xAxisG.call(xAxis);
        
        angleScale
          .domain([0, d3.max(data, function (d){ return d[sliceSizeColumn]; })])
          .range([0, Math.PI]);
​
        var pieData = pie(data);
        pieData.forEach(function (d){
          d.startAngle = 0;
          d.endAngle = angleScale(d.value);
          console.log(d.endAngle);
        });
         
​
        pieG.attr("transform", "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")");
​
        var slices = pieG.selectAll("path").data(pieData);
        slices.enter().append("path");
        slices
          .attr("d", function (d, i){
            arc
              .innerRadius(function(d) { 
                return i / (pieData.length - 1) * radiusMax;
              })
              .outerRadius(function(d) { 
                return (i + 1) / (pieData.length - 1) * radiusMax;
              });
            return arc(d);
          })
          .attr("fill", function (d){ return colorScale(d.data[colorColumn]); });
        slices.exit().remove();
​
        colorLegendG.call(colorLegend);
​
      }
​
      function type(d){
        d.name = "World";
        d.population = +d.population;
        return d;
      }
​
      d3.csv("religionWorldTotals.csv", type, render);
​
    </script>
  </body>
</html>
​
    