Stacked bars showing estimated religion breakdown of the most populous 20 countries in 2010. Based on an example from the tutorial Splitting Charts. Interactions:
Data is from The Global Religious Landscape by Pew Research, generated using this processing script.
forked from curran's block: Stacked Bars
| <!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> |
| 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 |
