World Bank Climate CO2 Emissions (per country) D3 + CartoDB

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<script src="https://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="https://viz2.cartodb.com/tables/3087/public">World Bank Climate CO2 Emissions (per country)</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="https://data.worldbank.org/indicator/EN.ATM.CO2E.KT">CO2 Emissions Per Country</a>. The data was downloaded as an Excel and imported to CartoDB.</p>
  </div>
<script>

var radius = 48,
    padding = 10;

function loadViz(table_name, domain){

var color = d3.scale.linear()
        .domain(domain)
        .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("https://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) {

//clean-up existing svg
      d3.selectAll("svg")
         .remove();

var data = collection.rows;

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; })

});
  }

var tons_per_capita = 'climate_emissions';
  var tons_per_country= 'emissions_total';

loadViz(tons_per_country, [0, 1000000, 2000000, 7000000])

// loadViz(tons_per_capita, [0, 1, 20, 80]);
  // setTimeout(function(){
  //   loadViz(tons_per_country, [0, 1000, 150000, 200000])
  // }, 3000)
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js