Radial Bar Chart

Radial bar chart. Inspired by this D3 issue - Variant of Bar Chart #2857.

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.

forked from curran's block: Religions Pie Chart

forked from curran's block: Religions Donut Chart

forked from curran's block: Staggered Donut Chart

web counter

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

colorLegendG.call(colorLegend);

}

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

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js