World Bank Climate CO2 Emissions (per capita) D3 + CartoDB by andrewxhill

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<script src="//d3js.org/d3.v3.min.js"></script>
<style>

body {
  font: 10px sans-serif; margin: 0; padding: 0; width: 100%;
  background: black;
  color: white;
}
svg {
  padding: 10px 0 0 10px;
  font-color: white;
  color: white;
}
.arc {
}
</style>
<body>
  <div class="header">
    <h1>
      <a href="//viz2.cartodb.com/tables/3086/public">World Bank Climate CO2 Emissions (per capita)</a>
    </h1>
    <p>Clockwise from 1979 to 2009. This is an exmaple of how to build a D3 graph visualization using the CartoDB SQL API. <br/> You can find the original source data here, <a href="//data.worldbank.org/indicator/EN.ATM.CO2E.PC">CO2 Emissions Per Capita</a>. The data was downloaded as an Excel and imported to CartoDB.</p>
  </div>
<script>

var radius = 48,
    padding = 10,
    table_name = 'climate_emissions';

    var color = d3.scale.linear()
        .domain([0, 1, 20, 80])
        .range(["white", "blue", "orange", "red"])
        .interpolate(d3.interpolateLab);

    var arc = d3.svg.arc()
        .outerRadius(radius)
        .innerRadius(radius - 24);

    var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { 
          //return d.val; 
          return 40
        });

    d3.json("//viz2.cartodb.com/api/v2/sql?format=json&dp=4&q=SELECT country_code, country_name,_1979,_1980,_1981,_1982,_1983,_1984,_1985,_1986,_1987,_1988,_1989,_1990,_1991,_1992,_1993,_1994,_1995,_1996,_1997,_1998,_1999,_2000,_2001,_2002,_2003,_2004,_2005,_2006,_2007,_2008,_2009 FROM "+table_name+" WHERE _2009 != '' AND _2009::float > 0.0 ORDER BY _2009::float DESC", function(error, collection) {

      var data = collection.rows;

      var years = [];
      d3.keys(data[0]).forEach(function(v){
        if (v !== "country_name") {
          if (v !== "country_code") {
            years.push(v);
          }
        }
      });
      data.forEach(function(d) {
        d.ages = d3.values(years).map(function(name) {
          return {name: name, val: +d[name]};
        });
      });

      var legend = d3.select("body").append("svg")
          .attr("class", "legend")
          .attr("width", radius * 2)
          .attr("height", radius * 2)
        .selectAll("g")
          .data(color.domain().slice().reverse())
        .enter().append("g")
          .attr("transform", function(d, i) { return "translate(0," + i * 14 + ")"; });

      legend.append("rect")
          .attr("width", 12)
          .attr("height", 12)
          .style("fill", color)
          .style("stroke-width", "0.1");

      legend.append("text")
          .attr("x", 18)
          .attr("y", 6)
          .attr("dy", ".35em")
          .style("fill", "white")
          .text(function(d) { return d; });

      var svg = d3.select("body").selectAll(".pie")
          .data(data)
        .enter().append("svg")
          .attr("class", "pie")
          .attr("width", radius * 2)
          .attr("height", radius * 2)
        .append("g")
          .attr("transform", "translate(" + radius + "," + radius + ")");

      svg.selectAll(".arc")
          .data(function(d) { return pie(d.ages); })
        .enter().append("path")
          .attr("class", "arc")
          .attr("d", arc)
          .style("stroke", "#fff")
          .style("fill", function(d) { return color(d.data.val); })
          .on("mouseover", function() {
            d3.select(this).style('stroke', d3.select(this).style("fill"));
          })
          .on("mouseout", function() {
            d3.select(this).style('stroke', "#fff")
          })
          .append("svg:title")
            .text(function(d) { 
              var label = d.data.name.replace('_','') + ": " + d.data.val; 
              return label.charAt(0).toUpperCase() + label.slice(1);
            })

      svg.append("text")
          .attr("dy", ".284em")
          .style("text-anchor", "middle")
          .style("fill", "white")
          .text(function(d) { return d.country_code; })
          .append("svg:title")
            .text(function(d) { return d.country_name; })

    });

</script>