Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
Last active August 29, 2015 13:56
Show Gist options
  • Save mpmckenna8/9179084 to your computer and use it in GitHub Desktop.
Save mpmckenna8/9179084 to your computer and use it in GitHub Desktop.
Column chart w/ bar labels - Centenarians per 100,000 people by country

Centenarians per 100,000 People by Country

Countries with the requisite data to calculate approximate centenarians per 100,000 people according to the Guardian Datablog's sources. See: http://www.theguardian.com/news/datablog/2013/sep/27/super-old-how-many-centena and make a better visualization!

This was my first d3.js usage of Tool tips. Keep your pointer/mouse thing over a bar to check em out.

country number_per_100_000_of_the_population the_geom cartodb_id created_at updated_at
Japan 1197 1 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Sweden 995 2 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Italy 908 3 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
France 887 4 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Norway 813 6 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Spain 778 7 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Denmark 720 8 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Finland 710 9 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
United States 666 10 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Australia 633 11 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Germany 592 12 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
New Zealand 573 13 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Iceland 499 14 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Slovenia 452 15 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Czech Republic 377 16 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Bulgaria 351 17 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
Croatia 302 18 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
China 121 19 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
India 58 20 2013-09-27 14:54:45.614155 2013-09-27 14:54:45.862011
United Kingdom 823 5 2013-09-27 14:54:45.614155 2013-09-27 15:05:18.652213
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 9px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
stroke:black;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 1100 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .4);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
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 + ")");
d3.csv("./data_vsvzs.csv", type, function(error, data) {
x.domain(data.map(function(d) { return d.country; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Centenarians per 100,000 of Population");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.country); })
.attr("width", x.rangeBand()+ 5)
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); })
});
function type(d) {
d.frequency = +d.number_per_100_000_of_the_population; //makin it a num
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment