Fossil fuel as % energy consumption vs. GDP

Fossil fuel as % energy consumption vs. GDP (EU countries + Switzerland)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
	<style>
		body {
			font-family: Helvetica, Arial, sans-serif;
		}
		.year {
		    opacity: 0.5
		}

h2, h3 {
			color: #888;
		}

h2 {
			font-size: 16px;
		}

h3 {
			font-size: 14px;
			padding-left: 40px;			
		}

.region {
			display: inline-block;
		}

.scale-item {
			width: 10px;
			height: 10px;
		}

.legend-item text {
			font-size: 12px;
		}
	</style>
	<title>Fossil fuel as % energy consumption vs. GDP</title>
</head>
<body>
<svg id="scale" width="100%" height="40">
</svg>
<div id="charts">
</div>
<script>
	var numOnRow = 6;
	var width = 100;
	var padding = 67
    var format = d3.format("1s");

var nest = d3.nest()
	.key(function(d) { return d.country })
	.key(function(d) { return d.metric });

var scaleX = d3.scale.linear()
	.domain([0, 100])
	.range([0, width]);

var scaleY = d3.scale.linear()
	.domain([1, 68616])
	.range([width, 0]);

var scaleSize = d3.scale.sqrt()
	.domain([0, 5*1e8])
	.range([2, 10]);

var scaleColor = d3.scale.linear()
	.domain([0, 21, 43])
	.range(["#2b83ba", "#ffffbf", "#d7191c"])
	.interpolate(d3.interpolateLab);

// legend
	var legendItems = d3.select("#scale").selectAll("g.legend-item")
	.data(d3.range(0, 43))
	.enter().append("g")
	.attr({
		"class": "legend-item",		
		"transform": function(d, i) {
			return "translate(" + (i * 12 + 15) + " 5)";
		}
	});

legendItems.append("circle")
	.attr({
		"cx": 5,
		"cy": 5,
		"r": 5,
		"fill": function(d) {
			return scaleColor(d)
		},
		"stroke": function(d) {
			return d % 5 == 0 ? "#EEE" : "";
		},
		"stroke-width": 2
	});

legendItems.append("text")
	.attr({
		"x": 0,
		"y": 25,
		"text-anchor": "end",
		"transform": "translate(-10 0) rotate(-45)"
	})
	.text(function(d) {
		if (d % 5 == 0) {
			return 1970 + d;
		}
		return ""
	});

d3.json("data.json", function(rawData) {
		var euData = _.filter(rawData, function(d) { 
			return ["EU", "Switzerland"].indexOf(d.region) >= 0;
		});

var data = _.sortBy(nest.entries(euData), function(d) { return d.values[0].values[0].region });

var regions = d3.select("#charts").selectAll("div.region")
		.data(data)
		.enter().append("div")
		.html(function(d) { 
			return "<h3>" + d.key + "</h3><svg width='170' height='150'><g class='axis x'></g><g class='axis y'></g><g class='chart'></g></svg>"
		})
		.attr({
		    "class": "region"
		})
		.select("svg");

var axisX = d3.svg.axis()
		.orient("bottom")
		.ticks(3)
		.tickFormat(function(d) {
		    return d+"%"
		})		
		.scale(scaleX);

var axisY = d3.svg.axis()
		.orient("left")
		.ticks(5)
		.tickFormat(function(d) {
		    return format(d)
		})
		.scale(scaleY);

var chart = regions.select(".chart").attr("transform", "translate(40 0)");
		chart.append("rect")
		.attr({
		    "width": width,
		    "height": width,
		    "fill": "#EFEFEF"
		});

// Axes
		regions.select("g.axis.y").call(axisY).attr("transform", "translate(40 0)");
		regions.select("g.axis.x").call(axisX).attr("transform", "translate(40 " + width + ")");

var axis = regions.selectAll(".axis");
		axis.selectAll(".domain").attr("fill", "none").attr("stroke", "#888888")
		axis.selectAll(".tick text").attr({
		    "font-size": 9,
		    "fill": "#999999"
		})

// Chart
		chart.selectAll(".year")
		.data(function(d) {
		    var region = d.key;
		    var metrics = d.values;
		    var dt = [];

// for each year
		    _.each(d3.range(43), function(i) {
		        var out = {};
		        _.each(metrics, function(d) {
		            var metric = d.key;
		            values = d.values;
		            out[metric] = values[0]["series"][i];
		        });
		        dt.push(out);
		    }) ;
		    return dt;
		})
		.enter().append("circle")
		.attr({
		    "class": "year",
		    "cx": function(d) {
		        return scaleX(d.fossil_fuels)
		    },
		    "cy": function(d) {
		        return scaleY(d.gdp);
		    },
		    "r": function(d, i) {
		        return scaleSize(d.population)
		    },
		    "fill": function(d, i) {
		        return scaleColor(i)
		    }
		})

});
</script>
</body>
</html>

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

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

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js