Donut Chart Small Multiples

A small multiples visualization of donut charts showing the breakdown of religions for the largest 5 countries. This is example 31 from the screencast Splitting Charts.

Note that area is not proportional to population, because the donuts are all the same size, regardless of population. This visualization shows the proportions of different religions within each country only. This property makes this visualization misleading in a way. For example, Brazil gets just as many pixels as China while being only a fraction of the population. To remedy this, it would be better to size each donut chart based on the population of each country.

Data from Pew Research Center Global Religious Landscape data set
Uses d3-legend
Uses nested selections.

forked from curran's block: Polar Area Small Multiples

<!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: 21pt;
      }

.axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

.color-legend text {
        font-family: 'Open Sans', sans-serif;
        font-size: 17pt;
      }

</style>
  </head>
  <body>
    <script>

var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 95, top: 0, right: 108, bottom: 297 };

var xColumn = "country";
      var colorColumn = "religion";
      var sliceSizeColumn = "population";
      var outerRadius = 86;
      var innerRadius = outerRadius / 2;

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 colorLegendG = svg.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate(415, 255)");

var xScale = d3.scale.ordinal().rangePoints([0, innerWidth]);
      var colorScale = d3.scale.category10();

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .outerTickSize(0);

var pie = d3.layout.pie();
      var arc = d3.svg.arc();
      arc.outerRadius(outerRadius);
      arc.innerRadius(innerRadius);

var colorLegend = d3.legend.color()
        .scale(colorScale)
        .shapePadding(3)
        .shapeWidth(25)
        .shapeHeight(25)
        .labelOffset(4);

function render(data){

var nested = d3.nest()
          .key(function (d){ return d[xColumn]; })
          .entries(data);

xScale.domain(nested.map( function (d){ return d.key; }));
        colorScale.domain(nested[0].values.map(function (d){ return d[colorColumn]; }));
        pie.value(function(d) { return d[sliceSizeColumn]; });

var pies = g.selectAll(".pie").data(nested);
        pies.enter().append("g").attr("class", "pie");
        pies.attr("transform", function (d){
          var x = xScale(d.key);
          return "translate(" + x + "," + innerHeight / 2 + ")";
        });
        pies.exit().remove();

var slices = pies.selectAll("path").data(function (d){
          return pie(d.values);
        });

slices.enter().append("path");
        slices
          .attr("d", arc)
          .attr("fill", function (d){ return colorScale(d.data[colorColumn]); });
        slices.exit().remove();

xAxisG.call(xAxis);
        colorLegendG.call(colorLegend);
      }

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

d3.csv("religionByCountryTop5.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