Skip to content

Instantly share code, notes, and snippets.

Last active January 26, 2016 19:32
Show Gist options
  • Save curran/4df29e2f8c6e20ed2baf to your computer and use it in GitHub Desktop.
Save curran/4df29e2f8c6e20ed2baf to your computer and use it in GitHub Desktop.
Religions Bar Chart

A bar chart showing population of World religions in 2010. Data shown is from the Pew-Templeton Global Religious Futures Project.

This data is taken exactly as-is from the Pew-Templeton Web site, including labels for religions, and does not represent my opinions. This data may not be 100% accurate, I'm not sure. I'd be curious to see results from others sources that show a similar comparison of World religions.

The code for this chart is derived from example 105 of the screencast Introduction to D3.js. Also, the tool tip approach draws from d3noob’s Simple d3.js tooltips block

<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="//"></script>
<link href='' rel='stylesheet' type='text/css'>
<script src="//"></script>
.axis text {
font-family: 'Playfair Display', serif;
font-size: 24pt;
.axis .label {
font-size: 40pt;
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
.y.axis path, .y.axis line {
stroke: none;
.tooltip {
font-family: 'Playfair Display', serif;
font-size: 24pt;
/* This trick adds a heavy white shadow around the text. */
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white,
0px 0px 6px white;
/* This eliminates the possibility of flickering tooltips. */
pointer-events: none;
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 240, top: 0, right: 0, bottom: 101 };
var barPadding = 0.2;
var barPaddingOuter = 0.1;
var xColumn = "population";
var yColumn = "religion";
var xAxisLabelText = "Population in 2010";
var xAxisLabelOffset = 80;
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - - margin.bottom;
var svg ="body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")")
var xAxisLabel = xAxisG.append("text")
.style("text-anchor", "middle")
.attr("x", innerWidth / 2)
.attr("y", xAxisLabelOffset)
.attr("class", "label")
var yAxisG = g.append("g")
.attr("class", "y axis");
var tooltip = svg.append("text").attr("class", "tooltip");
var xScale = d3.scale.linear().range([0, innerWidth]);
var yScale = d3.scale.ordinal().rangeRoundBands([0, innerHeight], barPadding, barPaddingOuter);
// Use D3's number format that generates SI prefixes for the X axis.
// See also
var siFormat = d3.format("s");
function tickFormat(num){
// Replace the confusing G (for Giga) with
// the more recognizable B (for Billion).
return siFormat(num).replace("G", "B");
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
var yAxis = d3.svg.axis().scale(yScale).orient("left")
var tooltipFormat = d3.format(",");
function showTooltip(d){
tooltip.text(tooltipFormat(d[xColumn]) + " people")
.attr("x", d3.event.pageX + 20)
.attr("y", d3.event.pageY);
function hideTooltip(){
function render(data){
xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
yScale.domain( function (d){ return d[yColumn]; }));;;
var bars = g.selectAll("rect").data(data);
.attr("height", yScale.rangeBand())
.on("mouseover", showTooltip)
.on("mousemove", showTooltip)
.on("mouseout", hideTooltip);
.attr("x", 0)
.attr("y", function (d){ return yScale(d[yColumn]); })
.attr("width", function (d){ return xScale(d[xColumn]); });
function type(d){
d.population = +d.population;
return d;
d3.csv("religions2010.csv", type, render);
religion population
Christians 2168330000
Muslims 1599700000
Unaffiliated 1131150000
Hindus 1032210000
Buddhists 487760000
Folk Religions 404690000
Other Religions 58150000
Jews 13860000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment