andrewxhill/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<script src="http://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="http://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="http://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("http://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>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
	<script src="http://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="http://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="http://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("http://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>