D3 Examples - The growth in catholics around the world

The growth in catholics around the world

On March 13, 2013, Jorge Mario Bergoglio became the first Latin American to head up the Vatican. As Pope Francis, he will lead a Roman Catholic church that is rapidly changing in its demographics. The data shown here, from the World Christian Database represents the absoulte growth in the number of catholics in every country in the world between 2000 and 2010. What's clear is that the biggest growth is happening in Latin America and Africa, while the biggest contraction is happening in Europe.

The code used in this block is based heavily on Mike Bostock's Bar Chart with Negative Values example.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>The growth in catholics by country</title>
<style>
  .bar.positive {
  fill: #158EFF;
}
​
.bar.negative {
  fill: #804C80;
}
​
.big-label {
  font: 20px sans-serif;
}
​
.big-number {
  font: 30px sans-serif;
}
​
.list {
  font:15px sans-serif;
}
​
.explain {
  font:15px sans-serif;
  font-style: italic;
}
​
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
​
    var margin = {top: 30, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
  var popGrowth = 794;
​
  var x = d3.scale.linear()
    .range([0, width]);
​
  var y = d3.scale.ordinal()
    .rangeBands([0, height], .2);
​
  var commas = d3.format(",");
​
  d3.csv("data.csv", function(csv) {
    data = csv;
    data.forEach(function(d) {
      d.diff = parseInt(d.diff)
    });
​
    x.domain([1.5*d3.min(data, function(d) {return d.diff;}), d3.max(data, function(d) {return d.diff;})])
        .nice();
​
    y.domain(d3.range(data.length));
​
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("class", function(d) { return d.diff < 0 ? "bar negative" : "bar positive"; })
        .attr("x", function(d) { return x(Math.min(0, d.diff)); })
        .attr("y", function(d, i) { return y(i); })
        .attr("width", function(d) { return Math.abs(x(d.diff) - x(0)); })
        .attr("height", y.rangeBand());
​
    svg.append("text")
      .text("Each bar represents a single country")
      .attr("class","explain")
      .attr("x", 500)
      .attr("y", 50)
​
    var yLabel = 100;
​
    svg.append("text")
        .text("Worldwide growth in catholics, 2000-2010")
        .attr("class","big-label")
        .attr("x", 500)
        .attr("y", yLabel);
​
    svg.append("text")
        .attr("class","big-number")
        .attr("x", 500)
        .attr("y", yLabel + 30)
        .text( function(){
            sum = 0
            data.forEach(function(d,i){
                sum += d.diff;
            })
            return Math.round(sum/1000000) + "m"
        });
​
    svg.append("text")
        .text("Growth in total population")
        .attr("class","big-label")
        .attr("x", 500)
        .attr("y", yLabel+75);
​
    svg.append("text")
        .attr("class","big-number")
        .attr("x", 500)
        .attr("y", yLabel + 75 + 30)
        .text(popGrowth + "m");
​
    // List the top ten and bottom ten countries by overall growth of catholics
    svg.selectAll(".list")
            .data(data.slice(0,10).concat(data.slice(225,235)))
        .enter().append("text")
        .text(function(d,i) {
          var indexAdd
          if (i > 9) {
            indexAdd = 216;
          }
          else {
            indexAdd = 1;
          }
          return (i+indexAdd) + ". " + d.country + " (" + commas(d.diff) + ")";
        })
        .attr("y", function(d,i){
          var yAdd
          if (i > 9) {
            yAdd = 50;
          }
          else {
            yAdd = 15;
          }
          return yAdd + 20*i;
        })
        .attr("x", 0)
        .attr("class","list");
​
    svg.append("text")
      .text("...")
      .attr("class","list")
      .attr("x",0)
      .attr("y",220)
​
​
  });
</script>
</body>
    