dougdowson · August 29, 2015 14:06
diff --git a/chart.js b/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");
diff --git a/data.csv b/data.csv
diff --git a/index.html b/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>
diff --git a/thumbnail.png b/thumbnail.png
	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");
	<!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>