Religions of Largest 20 Countries by curran

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>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.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: 13pt;
      }
      .axis .label {
        font-size: 20pt;
      }

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

      .color-legend text {
        font-family: 'Open Sans', sans-serif;
        font-size: 19pt;
      }
      
      .d3-tip {
        font-family: 'Open Sans', sans-serif;
        font-size: 19pt;
        line-height: 1;
        padding: 7px;
        background: black;
        color: lightgray;
        border-radius: 20px;
      }
      
    </style>
  </head>
  <body>
    <script>
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 123, top: 40, right: 30, bottom: 47 };
      var barPadding = 0.2;

      var xColumn = "population";
      var yColumn = "country";
      var colorColumn = "religion";
      var layerColumn = colorColumn;
      
      var hoveredColorValue;
      var hoveredStrokeColor = "black";

      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 + ")");
      
      // This is the layer where the bars are drawn.
      var baseBarLayer = g.append("g");
      
      // This layer contains a semi-transparent overlay
      // that fades out the base bars.
      var overlayRect = g.append("g")
        .append("rect")
        .attr("width", innerWidth)
        .attr("height", innerHeight)
        .attr("fill", "none")
        .style("pointer-events", "none");
      
      // This contains the subset of bars rendered on top
      // when you hover over the entries in the color legend.
      var foregroundBarLayer = g.append("g");
      
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");
      var yAxisG = g.append("g")
        .attr("class", "y axis");
      var colorLegendG = g.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate(596, 0)");

      var xScale = d3.scale.linear().range([0, innerWidth]);
      var yScale = d3.scale.ordinal().rangeBands([innerHeight, 0], barPadding);
      var colorScale = d3.scale.category10();
      
      var tipNumberFormat = d3.format(",");
      var tip = d3.tip()
        .attr("class", "d3-tip")
        .offset([-10, 0])
        .html(function(d) {
          return [
            d[colorColumn],
            " in ",
            d[yColumn],
            ": ",
            tipNumberFormat(d[xColumn])
          ].join("");
        });
      g.call(tip);
      
      // Use a modified SI formatter that uses "B" for Billion.
      var siFormat = d3.format("s");
      var customTickFormat = function (d){
        return siFormat(d).replace("G", "B");
      };

      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(5)
        .tickFormat(customTickFormat)
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .outerTickSize(0);

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

      function render(data){

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

        var stack = d3.layout.stack()
          .y(function (d){ return d[xColumn]; })
          .values(function (d){ return d.values; });

        var layers = stack(nested.reverse()).reverse();

        xScale.domain([
          0,
          d3.max(layers, function (layer){
            return d3.max(layer.values, function (d){
              return d.y0 + d.y;
            });
          })
        ]);

        yScale.domain(layers[0].values.map(function (d){
          return d[yColumn];
        }));

        colorScale.domain(layers.map(function (layer){
          return layer.key;
        }));

        xAxisG.call(xAxis); 
        yAxisG.call(yAxis);

        renderBars(baseBarLayer, layers);
        
        if(hoveredColorValue){
          setOverlayTransparency(0.7);
          renderBars(foregroundBarLayer, layers.filter(function (layer){
            return layer.key === hoveredColorValue;
          }));
        } else {
          setOverlayTransparency(0.0);
          renderBars(foregroundBarLayer, []);
        }
        
        colorLegendG.call(colorLegend);
        
        // Move the text down a bit.
        colorLegendG.selectAll("text").attr("y", 4);
        
        listenForHover(colorLegendG.selectAll("rect"), data);
        listenForHover(colorLegendG.selectAll("text"), data);
      }
      
      function renderBars(g, layers){
        var layerGs = g.selectAll(".layer").data(layers);
        layerGs.enter().append("g").attr("class", "layer");
        layerGs.exit().remove();

        layerGs.style("fill", function (d){
          return colorScale(d.key);
        });

        var bars = layerGs.selectAll("rect").data(function (d){
          return d.values;
        });
        bars.enter().append("rect")
          .on("mouseover", function(d){
            tip.show(d);
          
            // Fix the issue where the tip goes off the screen.
            d3.select(".d3-tip").style("left", "100px");
          })
          .on("mouseout", tip.hide);
        bars.exit().remove();
        bars
          .attr("x", function (d){ return xScale(d.y0); })
          .attr("y", function (d){ return yScale(d[yColumn]); })
          .attr("width", function (d){ return xScale(d.y); })
          .attr("height", yScale.rangeBand());
      }
      
      function listenForHover(selection, data){
        selection
          .on("mouseover", function (d){
            hoveredColorValue = d;
            render(data);
          })
          .on("mouseout", function (d){
            hoveredColorValue = null;
            render(data);
          })
          .style("cursor", "pointer");
      }
      
      function setOverlayTransparency(alpha){
        overlayRect
          .transition().duration(400)
          .attr("fill", "rgba(255, 255, 255, " + alpha + ")");
      }

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

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

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

religionByCountryTop20.csv

country,religion,population
China,Christian,68410000
China,Muslim,24690000
China,Unaffiliated,700680000
China,Hindu,20000
China,Buddhist,244130000
China,Folk Religions,294320000
China,Other Religions,9080000
China,Jewish,0
India,Christian,31130000
India,Muslim,176190000
India,Unaffiliated,870000
India,Hindu,973750000
India,Buddhist,9250000
India,Folk Religions,5840000
India,Other Religions,27560000
India,Jewish,10000
United States,Christian,243060000
United States,Muslim,2770000
United States,Unaffiliated,50980000
United States,Hindu,1790000
United States,Buddhist,3570000
United States,Folk Religions,630000
United States,Other Religions,1900000
United States,Jewish,5690000
Indonesia,Christian,23660000
Indonesia,Muslim,209120000
Indonesia,Unaffiliated,240000
Indonesia,Hindu,4050000
Indonesia,Buddhist,1720000
Indonesia,Folk Religions,750000
Indonesia,Other Religions,340000
Indonesia,Jewish,0
Brazil,Christian,173300000
Brazil,Muslim,40000
Brazil,Unaffiliated,15410000
Brazil,Hindu,0
Brazil,Buddhist,250000
Brazil,Folk Religions,5540000
Brazil,Other Religions,300000
Brazil,Jewish,110000
Pakistan,Christian,2750000
Pakistan,Muslim,167410000
Pakistan,Unaffiliated,20000
Pakistan,Hindu,3330000
Pakistan,Buddhist,20000
Pakistan,Folk Religions,30000
Pakistan,Other Religions,20000
Pakistan,Jewish,0
Nigeria,Christian,78050000
Nigeria,Muslim,77300000
Nigeria,Unaffiliated,680000
Nigeria,Hindu,0
Nigeria,Buddhist,10000
Nigeria,Folk Religions,2290000
Nigeria,Other Religions,90000
Nigeria,Jewish,0
Bangladesh,Christian,280000
Bangladesh,Muslim,133540000
Bangladesh,Unaffiliated,80000
Bangladesh,Hindu,13520000
Bangladesh,Buddhist,720000
Bangladesh,Folk Religions,520000
Bangladesh,Other Religions,30000
Bangladesh,Jewish,0
Russia,Christian,104750000
Russia,Muslim,14290000
Russia,Unaffiliated,23180000
Russia,Hindu,30000
Russia,Buddhist,170000
Russia,Folk Religions,310000
Russia,Other Religions,0
Russia,Jewish,230000
Japan,Christian,2030000
Japan,Muslim,200000
Japan,Unaffiliated,72120000
Japan,Hindu,30000
Japan,Buddhist,45820000
Japan,Folk Religions,450000
Japan,Other Religions,5890000
Japan,Jewish,0
Mexico,Christian,107910000
Mexico,Muslim,0
Mexico,Unaffiliated,5330000
Mexico,Hindu,0
Mexico,Buddhist,0
Mexico,Folk Religions,70000
Mexico,Other Religions,20000
Mexico,Jewish,70000
Philippines,Christian,86370000
Philippines,Muslim,5150000
Philippines,Unaffiliated,90000
Philippines,Hindu,0
Philippines,Buddhist,80000
Philippines,Folk Religions,1430000
Philippines,Other Religions,130000
Philippines,Jewish,0
Vietnam,Christian,7170000
Vietnam,Muslim,160000
Vietnam,Unaffiliated,26040000
Vietnam,Hindu,0
Vietnam,Buddhist,14380000
Vietnam,Folk Religions,39750000
Vietnam,Other Religions,350000
Vietnam,Jewish,0
Ethiopia,Christian,52070000
Ethiopia,Muslim,28680000
Ethiopia,Unaffiliated,50000
Ethiopia,Hindu,0
Ethiopia,Buddhist,0
Ethiopia,Folk Religions,2130000
Ethiopia,Other Religions,0
Ethiopia,Jewish,0
Germany,Christian,56540000
Germany,Muslim,4760000
Germany,Unaffiliated,20350000
Germany,Hindu,80000
Germany,Buddhist,210000
Germany,Folk Religions,40000
Germany,Other Religions,100000
Germany,Jewish,230000
Egypt,Christian,4120000
Egypt,Muslim,76990000
Egypt,Unaffiliated,0
Egypt,Hindu,0
Egypt,Buddhist,0
Egypt,Folk Religions,0
Egypt,Other Religions,0
Egypt,Jewish,0
Iran,Christian,110000
Iran,Muslim,73570000
Iran,Unaffiliated,110000
Iran,Hindu,20000
Iran,Buddhist,0
Iran,Folk Religions,0
Iran,Other Religions,150000
Iran,Jewish,0
Turkey,Christian,320000
Turkey,Muslim,71330000
Turkey,Unaffiliated,860000
Turkey,Hindu,0
Turkey,Buddhist,40000
Turkey,Folk Religions,20000
Turkey,Other Religions,150000
Turkey,Jewish,20000
Thailand,Christian,600000
Thailand,Muslim,3770000
Thailand,Unaffiliated,190000
Thailand,Hindu,70000
Thailand,Buddhist,64420000
Thailand,Folk Religions,60000
Thailand,Other Religions,0
Thailand,Jewish,0
DR Congo,Christian,63210000
DR Congo,Muslim,970000
DR Congo,Unaffiliated,1170000
DR Congo,Hindu,30000
DR Congo,Buddhist,0
DR Congo,Folk Religions,490000
DR Congo,Other Religions,100000
DR Congo,Jewish,0