block by mpmckenna8 9179084

Column chart w/ bar labels - Centenarians per 100,000 people by country

Full Screen

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.

index.html

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

data_vsvzs.csv

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