|
<!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="http://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> |
