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/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="//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 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) {
d3.selectAll("svg")
.remove();
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; })
});
}
var tons_per_capita = 'climate_emissions';
var tons_per_country= 'emissions_total';
loadViz(tons_per_country, [0, 1000000, 2000000, 7000000])
</script>