D3 Examples - Fossil fuel as % energy consumption vs. GDP

xxxxxxxxxx
 
<!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>
​
    