Scatterplot: CO2 Emissions

chart.js

var margin = {top: 35, right: 45, bottom: 40, left: 25},
    width = 565 - margin.left - margin.right,
    height = 460 - margin.top - margin.bottom;

var parseYear = d3.time.format("%Y").parse,
    parseDate = d3.time.format("%Y%m").parse,
    parseMonth = d3.time.format("%m-%Y").parse,
    numberFormat = d3.format(",.0f"),
    numberFormatDetailed = d3.format(",.1f");

var x = d3.scale.linear()
	.range([0, width]);

var y = d3.scale.linear()
	.range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(numberFormatDetailed);

var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(numberFormatDetailed)
	.tickSize(-width);

var svg = d3.select("#chart").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 + ")");

var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

var group;
var selectedGDP;
var selectedCO2pc;
var selectedCO2;
var selectedGDP2;
var selectedCO2pc2;



var selectedClass;
var duration = 250;
var year = 1980;
var count = 0;
var timerWidth = 200;
var timerHeight = 5;
var timerMargin = 2;
var radius = 7;
var buffer = 12;
var increment = (timerWidth-2*timerMargin-5)/30;

var slidersvg = d3.select("#slider").append("svg")
	.attr("width", 250)
	.attr("height", 23);

var rect = slidersvg.append("rect")
	.attr("width", timerWidth)
	.attr("height", timerHeight)
	.attr("x", buffer-5)
	.attr("y", buffer);

var timerCircle = slidersvg.append("circle")
	.attr("class", "timerCircle")
	.attr("cx", buffer+(count*increment)+timerMargin)
	.attr("cy", buffer+timerMargin)
	.attr("r", radius);


d3.select("#play").on("click", function(){
	setup();
});


function setup(){
	d3.select("#play")
		.html("Play<span class='fa fa-caret-right'></span>")
		.on('click', null);
	year = 1980;
	count = 0;
	updateScatter();
	startTimer();
};



	function startTimer() {

		if (year==2010) {
			d3.select("#play").on("click", function(){
				setup();
			});

		setTimeout(function(){
		d3.select("#play").html("Replay<span class='fa fa-repeat'></span>");
		}, 500);

		} else {

		setTimeout(updateKnob, duration);
		setTimeout(updateScatter, duration);
		setTimeout(startTimer, duration);

		year = year + 1;
		count = count + 1;

		}
	}



function updateKnob() {
	timerCircle
		.transition()
		.duration(duration)
		.ease("linear")
		.attr("cx", buffer+(count*increment)+timerMargin-5);
}


d3.csv("data.csv", function(error, data) {

	selectedCO2 = "co2" + year;
	selectedGDP = "loggdppc" + year;
	selectedCO2pc = "logco2pc" + year;
	selectedGDP2 = "gdppc" + year;
	selectedCO2pc2 = "co2pc" + year;

	data.forEach(function(d) {
		d.loggdppc1980 = +d.loggdppc1980;
		d.logco2pc1980 = +d.logco2pc1980;
	});

	x.domain([5.3,11.5]);
	y.domain([-1.3,4.3]);

	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis)
			.append("text")
			.attr("dy", "2.8em")
			.attr("dx", width/1.6)
			.style("text-anchor","end")
			.attr("class", "xlabel")
			.text("GDP per capita, log");

	svg.append("g")
		.attr("class", "left axis")
		.call(yAxis);

	svg.append("text")
		.attr("id", "year")
		.attr("dy", height-20)
		.attr("dx", width/2-20)
		.text("1980");

	svg.append("text")
		.attr("class", "left label")
		.text("Metric tons CO2 emissions per capita, log")
		.attr("x", -margin.left + 5)
		.attr("y", -12);

	group = svg.selectAll(".group")
		.data(data)
		.enter().append("g")
		.attr("class", "group");

	group.append("circle")
		.attr("class", function(d) { return d.region; })
		.classed("scatter", true)
		.attr("id", function(d) { return d.country; })
		.attr("r", function(d) { return 20*(Math.pow((d.co21980/1000000/3.14),0.5));})
		.attr("cx", function(d) { return x(d.loggdppc1980); })
		.attr("cy", function(d) { return y(d.logco2pc1980); });

	var legend = svg.append("g")
		.attr("class", "legend")
		.attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")")
		.selectAll("g")
		.data([1e6, 5e6, 1e7])
		.enter().append("g");

	legend.append("circle")
		.attr("cy", function(d) { return -20*(Math.pow(((d)/1000000/3.14),0.5));})
		.attr("r", function(d) { return 20*(Math.pow(((d)/1000000/3.14),0.5));});

	legend.append("text")
		.attr("y", function(d) { return -40*(Math.pow(((d)/1000000/3.14),0.5));})
		.attr("dy", "1.3em")
		.text(d3.format(".1s"));

	legend.append("text")
		.attr("dy", "-80px")
		.text("Total emissions");

	d3.selectAll(".scatter")
		.on("mouseover", function(d) {
			d3.select(this)
				.style("fill","#006E9B")
				.style("opacity",1);

			tooltip
				.html(
				"<p><strong>" + d.country + ", " + year + "</strong></p>" +
				"<p>CO<sub>2</sub> emissions: <strong>" + numberFormatDetailed(d[selectedCO2]/1000000) + " million kilotons</strong></p>" +
				"<p>GDP per capita: <strong>$" + numberFormat(d[selectedGDP2]) + "</strong></p>" +
				"<p>CO<sub>2</sub> per capita: <strong>" + numberFormatDetailed(d[selectedCO2pc2]) + " metric tons</strong></p>"
				)
				.style("left", (d3.event.pageX - 15) + "px")
				.style("top", (d3.event.pageY - 100) + "px")
				.transition()
				.duration(250)
				.style("opacity", 1);
		})
		.on("mouseout", function(d) {
			tooltip
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.selectAll(".scatter")
				.style("fill","#00a1ce")
				.style("opacity",0.6);

		});



		d3.selectAll("#countrybuttons .button").on("click", function(){

			selectedClass = d3.select(this).attr("id");

			if (d3.select(this).classed("selected")) {
				d3.select(this).classed("selected", false);

				d3.selectAll("." + selectedClass)
					.style("opacity", 0)
					.style("display", "none");
			} else {
				d3.select(this).classed("selected", true);
				d3.selectAll("." + selectedClass)
					.style("opacity", 0.6)
					.style("display", "inline");
			}

		});


});



function updateScatter() {

	selectedCO2 = "co2" + year;
	selectedGDP = "loggdppc" + year;
	selectedCO2pc = "logco2pc" + year;
	selectedGDP2 = "gdppc" + year;
	selectedCO2pc2 = "co2pc" + year;

	d3.selectAll(".scatter")
		.transition()
		.duration(duration)
		.ease("linear")
		.attr("r", function(d) { return 20*(Math.pow((d[selectedCO2]/1000000/3.14),0.5));})
		.attr("cx", function(d) { return x(d[selectedGDP]); })
		.attr("cy", function(d) { return y(d[selectedCO2pc]); });

	d3.select("#year")
		.text(year);



	d3.selectAll(".scatter")
		.on("mouseover", function(d) {
			d3.select(this)
				.style("fill","#006E9B")
				.style("opacity",1);

			tooltip
				.html(
				"<p><strong>" + d.country + ", " + year + "</strong></p>" +
				"<p>CO<sub>2</sub> emissions: <strong>" + numberFormatDetailed(d[selectedCO2]/1000000) + " million kilotons</strong></p>" +
				"<p>GDP per capita: <strong>$" + numberFormat(d[selectedGDP2]) + "</strong></p>" +
				"<p>CO<sub>2</sub> per capita: <strong>" + numberFormatDetailed(d[selectedCO2pc2]) + " metric tons</strong></p>"
				)
				.style("left", (d3.event.pageX - 15) + "px")
				.style("top", (d3.event.pageY - 100) + "px")
				.transition()
				.duration(250)
				.style("opacity", 1);
		})
		.on("mouseout", function(d) {
			tooltip
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.selectAll(".scatter")
				.style("fill","#00a1ce")
				.style("opacity",0.6);

		});


}

d3.select(self.frameElement).style("height", "625px");

data.csv

index.html

<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>

<style>

body, h1, h2, h3, p {
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: #4a4a4a;
}

#content {
  margin: 5px;
  padding: 0px 0px 150px 0px;
  width: 575px;
  text-align: left;
}

#container {
  padding: 15px;
  border: 1px solid #ccc;
  height: 550px;
  clear: both;
}

#header h1 {
  margin: 0px 0px 0px 10px;
  padding: 4px 0px 0px 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: normal;
  color: #fff;
}

p {
  margin: 0px;
  padding: 0px 0px 15px 0px;
  color: #4a4a4a;
  font-weight: normal;
  line-height: 1.5rem;
}

p.body {
  padding: 15px 0px 15px 0px;
}

#slides {
  margin: 0px;
  padding: 0px;
  background: #fff;
  height: 400px;
  width: 300px;
  float: right;
}

#slides p {
  margin: 0px;
  padding: 0px 0px 13px 0px;
  color: #4a4a4a;
  font-weight: normal;
}

g.y.axis path.domain {
  stroke-width: 0px;
}

g.x.axis path.domain, g.x.axis g.tick.major line, g.x.axis g.tick line {
  stroke: #333;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.axis path, .axis line {
  fill: none;
  shape-rendering: crispEdges;
  border-width: 2px;
}

.axis line {
  stroke: #eee;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

g.group text, g.tick text, .x.axis text {
  color: #4a4a4a;
  font-size: 12px;
}

#buttons, #countrybuttons {
  margin: 0px 0px 0px 5px;
  padding: 0px;
}

#countrybuttons{
  margin: 5px 0px 0px 5px;
  padding: 0px;
}

.button {
  display: inline-block;
  margin: 0px 0px 3px 0px;
  padding: 4px 6px;
  line-height: 20px;
  background:#ff0000;
  min-width: 70px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

#countrybuttons .button {
  min-width: 0px;
  background:#f4f4f4;
  color: #747474;
}

#countrybuttons .selected {
  background:#ff0000;
  color: #fff;
}

.button:hover {
  background:#e3120b;
  color: #fff;
  cursor: pointer;
}

.button span {
  margin: 0px;
  padding: 0px 3px;
}

#play {
  float: left;
}

.regLine {
  fill: none;
  stroke: #00a1ce;
  stroke-width: 2.5;
  opacity: 0;
}

#header {
  margin: 0px;
  padding: 0px;
  height: 34px;
  background: #747474;
}

#block {
  float: left;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 10px;
  background: #ff0000;
}

.left.label {
  font-size: 12px;
  fill: #4a4a4a;
}

.right.label {
  font-size: 12px;
  fill: #772210;
}

#source {
  margin: 0px 0px 20px 0px;
  padding: 0px;
  font-size: 11px;
}

g.group text {
  opacity: 0;
}

circle {
  fill: #00a1ce;
  stroke: #fff;
  stroke-width: 1.5;
}

.scatter {
  opacity: 0.6;
}

.timerCircle {
  stroke: #ccc;
  stroke-width: 2;
  fill: #fff;
}

rect {
  fill: #ccc;
}

#year {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #4a4a4a;
  font-weight: bold;
}

div.tooltip {
  position: absolute;
  pointer-events: none;
  margin: 0px;
  padding: 7px;
  width: 255px;
  height: 75px;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  opacity: 0;
}

div.tooltip p {
  margin: 0px;
  padding: 0px;
  line-height: 1.2rem;
  color: #4a4a4a;
  text-align: left;
}

.legend circle {
  fill: none;
  stroke: #ccc;
  stroke-width: 1;
}

.legend text {
  fill: #747474;
  font: 10px Arial, sans-serif;
  text-anchor: middle;
}



</style>

</head>

<body>

<div id="content">

	<div id="header">
		<div id="block"></div>
		<h1>CO<sub>2</sub> emissions and GDP per capita</h1>
	</div>

	<div id="container">

	<div id="buttons">
	<div class="button" id="play">Play<span class="fa fa-caret-right"></span></div>
	</div>

	<div id="slider"></div>

	<div id="countrybuttons">
	<div class="button selected" id="africa">Africa</span></div>
	<div class="button selected" id="asia">Asia</span></div>
	<div class="button selected" id="europe">Europe</span></div>
	<div class="button selected" id="latam">Latin America</span></div>
	<div class="button selected" id="mena">MENA</span></div>
	<div class="button selected" id="northamerica">North America</span></div>
	</div>


	<div id="chart"></div>

		<p id="source">Source: World Bank, IMF</p>

	</div>

</div>

<script type="text/javascript" src="chart.js"></script>

</body>
</html>

thumbnail.png