Original chart created by Charles Boutaud, based on DStruths‘s block “d3.js Multi-series line chart interactive“ and mbostock‘s block, “Scatterplot with Multiple Series“.
Data Source: U.S. Energy Information Administration.
Built with blockbuilder.org.
forked from renecnielsen‘s block: Biofuels Production and Consumption
<!DOCTYPE html>
<meta charset="utf-8">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,800" rel="stylesheet" type="text/css">
<style>
body {
font: 11px "Open Sans";
margin: 0;
fill: #5d6263;
font-weight: 300;
}
.axis path,
.axis line {
fill: none;
stroke: #5d6263;
shape-rendering: crispEdges;
}
.legend-box {
cursor: pointer;
}
line.regressionLine {
stroke: #5d6263;
stroke-width: 0.7px;
stroke-dasharray: 4px 6px;
}
/*.teamLabel{font-weight:bold;fill:#74736c;}*/
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {
top: 130,
right: 145,
bottom: 30,
left: 45
},
width = 850 - margin.left - margin.right,
height = 820 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").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 + ")");
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
if (d.pays == "United Kingdom") {
return d.visible = true;
d.prod = +d.prod;
d.cons = +d.cons;
} else {
return d.visible = false;
d.prod = +d.prod;
d.cons = +d.cons;
};
});
var dataNest = d3.nest()
.key(function(d) {
return d.pays;
})
.entries(data);
var categories = dataNest.map(function(d, i) {
return {
name: d.key,
values: dataNest[i].values.map(function(d) {
return {
prod: +d.prod,
cons: +d.cons,
year: d.year
};
}),
visible: (d.key === "United Kingdom" ? true : false)
};
});
x.domain([0, 31]);
y.domain([0, 31]);
svg.append("foreignObject")
.attr("width", 600)
.attr("height", 200)
.attr("x", 50)
.attr("y", -110)
.append("xhtml:body")
.style("font-size", "12px")
.html("<h2>Daily Biofuels Production and Consumption, 2010-2012</h2><p>Explore the connections between consumption and production for the top-40 highest consumers and producers of biofuels in the world. Countries below the dashed line consume more biofuels than they produce. Countries above the line produce more than they consume. For example, United Kingdom and Germany consume more than they produce, whereas Argentina and Indonesia produce more than they consume.</p>");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.style("font-weight", 800)
.text("Daily Biofuels Consumption (1,000 Barrels)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.style("font-weight", 800)
.text("DailyBiofuels Production (1,000 Barrels)");
var agencies = svg.selectAll(".agencies")
.data(categories) // Select nested data and append to new svg group elements
.enter().append("g")
.attr("class", "agencies");
var dots = svg.selectAll(".dot")
.data(data).enter().append("g").attr("class", "dot")
dots.append("circle")
.attr("id", function(d) {
return d.pays.replace(/\s+/g, "");
})
.attr("class", "circles")
.attr("opacity", 1)
.attr("r", 3.5)
.attr("cx", function(d) {
return d.visible ? x(d.cons) : x(-100 * 100);
})
.attr("cy", function(d) {
return d.visible ? y(d.prod) : y(-100 * 100);
})
.style("fill", function(d) {
return color(d.pays);
});
// begin of drawing lines
var line = d3.svg.line()
.x(function(d) {
return x(d.cons);
})
.y(function(d) {
return y(d.prod);
})
.interpolate("linear");
var fitLine = svg.append("line")
.attr({
"class": "regressionLine",
"x1": x(0),
"x2": x(31),
"y1": y(0),
"y2": y(31)
})
svg.append("foreignObject")
.attr("class", "label")
.attr("text-anchor", "start")
.attr("x", -510)
.attr("y", 88)
.attr("transform", "rotate(-45) translate(333, 353)")
.append("xhtml:body")
.html("↑");
svg.append("text")
.attr("class", "label")
.attr("text-anchor", "start")
.attr("x", -500)
.attr("y", -65)
.attr("dy", "165px")
.attr("transform", "rotate(-45) translate(333, 353)")
.text("Production higher than consumption");
svg.append("foreignObject")
.attr("class", "label")
.attr("text-anchor", "start")
.attr("x", -510)
.attr("y", 123)
.attr("transform", "rotate(-45) translate(333, 353)")
.append("xhtml:body")
.html("↓");
svg.append("text")
.attr("class", "label")
.attr("text-anchor", "start")
.attr("x", -500)
.attr("y", -60)
.attr("dy", "195px")
.attr("transform", "rotate(-45) translate(333, 353)")
.text("Consumption higher than production");
agencies.append("path")
.attr("d", function(d) {
return d.visible ? line(d.values) : null; // If array key "visible" = true then draw line, if not then don't
})
.attr("id", function(d) {
return d.name.replace(/\s+/g, "")
})
.attr("class", "linkcircles")
.attr("transform", "translate(0,0)")
.attr("opacity", 1)
.style("stroke-width", 1.5)
.style("stroke", function(d) {
return color(d.name);
})
.style("fill", "none");
// end of drawing lines
dots.append("text").attr("id", function(d) {
return d.pays.replace(/\s+/g, "");
}).attr("class", "labels").attr("x", function(d) {
return d.visible ? x(d.cons) : -1000;
}).attr("y", function(d) {
return d.visible ? y(d.prod) - 7 : -100 * 100;
}).text(function(d) {
return (d.year)
}).attr("text-anchor", "middle");
agencies.append("rect")
.attr("width", 10)
.attr("height", 10)
.attr("x", (width + 15))
.attr("y", function(d, i) {
return i * 13
})
.attr("fill", function(d) {
return d.visible ? color(d.name) : "#F1F1F2"; // If array key "visible" = true then color rect, if not then make it grey
})
.attr("class", "legend-box")
.on("click", function(d) { // On click make d.visible
d.visible = !d.visible; // If array key for this data selection is "visible" = true then make
data.forEach(function(data) {
if (data.pays == d.name) {
return data.visible = !data.visible; // If array key for this data selection is "visible" = true then make
}
});
maxX = findMaxX(categories); // Find max X rating value categories data with "visible"; true
maxY = findMaxY(categories); // Find max Y rating value categories data with "visible"; true
if (maxX > maxY) {
maxY = maxX;
} else {
maxX = maxY;
}
x.domain([0, maxX]); // Redefine xAxis domain based on highest y value of categories data with "visible"; true
svg.select(".x.axis")
.transition()
.call(xAxis);
y.domain([0, maxY]); // Redefine yAxis domain based on highest y value of categories data with "visible"; true
svg.select(".y.axis")
.transition()
.call(yAxis);
dots.selectAll(".circles")
.transition()
.attr("cx", function(d) {
return d.visible ? x(d.cons) : x(-(100 * 100)); // Replace dots with new scale
})
.attr("cy", function(d) {
return d.visible ? y(d.prod) : y(-(100 * 100)); // Replace dots with new scale
});
agencies.selectAll(".linkcircles")
.transition()
.attr("d", function(d) {
return d.visible ? line(d.values) : null; // If d.visible is true then draw line for this d selection
});
agencies.select("rect")
.transition()
.attr("fill", function(d) {
return d.visible ? color(d.name) : "#F1F1F2";
});
dots.selectAll(".labels")
.transition()
.attr("x", function(d) {
return d.visible ? x(d.cons) : x(-(100 * 100)); // Replace labels with new scale
})
.attr("y", function(d) {
return d.visible ? y(d.prod) - 7 : y(-(100 * 100)); // Replace labels with new scale
});
svg.selectAll("line.regressionLine")
.transition()
.attr("x1", x(0))
.attr("x2", function(d) {
if (maxX < maxY) {
return x(maxX);
} else {
return x(maxY);
}
})
.attr("y1", y(0))
.attr("y2", function(d) {
if (maxX < maxY) {
return y(maxX);
} else {
return y(maxY);
}
});
})
.on("mouseover", function(d) {
d3.select("#" + d.name.replace(/\s+/g, "")).transition().style("stroke-width", 2.5)
})
.on("mouseout", function(d) {
d3.select("#" + d.name.replace(/\s+/g, "")).transition().style("stroke-width", 1.5)
});
agencies.append("text")
.attr("x", (width + 30)) // space legend
.attr("y", function(d, i) {
return i * 13 + 9
})
.attr("class", "legend") // style the legend
.text(function(d) {
return d.name
});
function findMaxX(data) { // Define function "findMaxY"
var maxXValues = data.map(function(d) {
console.log(d);
if (d.visible) {
return d3.max(d.values, function(value) { // Return max rating value
return value.cons * 1.05;
})
}
});
return d3.max(maxXValues);
};
function findMaxY(data) { // Define function "findMaxY"
var maxYValues = data.map(function(d) {
if (d.visible) {
return d3.max(d.values, function(value) { // Return max rating value
return value.prod * 1.05;
})
}
});
return d3.max(maxYValues);
};
});
</script>
pays,year,prod,cons,dif,per
Argentina,2010,38.1,11.9,26.2,31.2335958
Argentina,2011,50.34,17.65,32.69,35.06158125
Argentina,2012,52.2,20.2,32,38.69731801
Australia,2012,6.63728,6.13514,0.50214,92.4345515
Australia,2010,6.20365,6.91018,-0.70653,111.3889404
Australia,2011,6.96187,8.03028,-1.06841,115.3465951
Austria,2012,9.9,11.8,-1.9,119.1919192
Austria,2011,8.7,11.6,-2.9,133.3333333
Austria,2010,8.2,12.5,-4.3,152.4390244
Belgium,2011,15.2,7.8,7.4,51.31578947
Belgium,2012,15.5,8.2,7.3,52.90322581
Belgium,2010,13.5,8,5.5,59.25925926
Brazil,2010,527.13475,424.33586,102.79889,80.49855563
Brazil,2011,438.05804,377.41906,60.63898,86.15731833
Brazil,2012,449.2,406.6,42.6,90.51647373
Canada,2012,36.3,43.46,-7.16,119.7245179
Canada,2010,26.4,34.2,-7.8,129.5454545
Canada,2011,32.7,47,-14.3,143.7308869
China,2010,46.45844,46.45844,0,100
China,2011,53.54093,53.54093,0,100
China,2012,58.9002,58.9002,0,100
Colombia,2012,17,16.52,0.48,97.17647059
Colombia,2010,12,12,0,100
Colombia,2011,15,15,0,100
Croatia,2010,0.2,0.1,0.1,50
Croatia,2011,0.2,0.1,0.1,50
Croatia,2012,1.09,0.83,0.26,76.14678899
Czech Republic,2010,6,5.8,0.2,96.66666667
Czech Republic,2012,5.9,6.8,-0.9,115.2542373
Czech Republic,2011,6,7.3,-1.3,121.6666667
Denmark,2010,1.8,1.1,0.7,61.11111111
Denmark,2011,2.8,5,-2.2,178.5714286
Denmark,2012,2,5.2,-3.2,260
Finland,2010,5.9,4.5,1.4,76.27118644
Finland,2011,4.2,4.7,-0.5,111.9047619
Finland,2012,5.2,11,-5.8,211.5384615
France,2010,55,55,0,100
France,2011,51.4,56.5,-5.1,109.922179
France,2012,49.7,56,-6.3,112.6760563
Germany,2011,70.535,73.9,-3.365,104.7706812
Germany,2012,68.07,75.7,-7.63,111.2090495
Germany,2010,62,75.5,-13.5,121.7741935
Greece,2011,2,2.3,-0.3,115
Greece,2010,2.4,2.8,-0.4,116.6666667
Greece,2012,2.3,2.76,-0.46,120
Guatemala,2010,3.01,0.01,3,0.332225914
Guatemala,2012,8.02,0.03,7.99,0.374064838
Guatemala,2011,4.01,0.02,3.99,0.498753117
Hungary,2011,5.8,4.2,1.6,72.4137931
Hungary,2010,6,4.6,1.4,76.66666667
Hungary,2012,4.32,4.23,0.09,97.91666667
India,2010,2.41253,1.7577,0.65483,72.85712509
India,2012,7.23759,6.46213,0.77546,89.28566001
India,2011,8.04751,7.32375,0.72376,91.00641068
Indonesia,2011,31.11824,7.56918,23.54906,24.32393349
Indonesia,2010,12.85194,3.79112,9.06082,29.49842592
Indonesia,2012,37.91119,14.04568,23.86551,37.04890298
Ireland,2010,1.3,2.3,-1,176.9230769
Ireland,2011,1.1,2.5,-1.4,227.2727273
Ireland,2012,0.9,2.5,-1.6,277.7777778
Italy,2012,10.71,21.4,-10.69,199.8132586
Italy,2010,16.5,35.2,-18.7,213.3333333
Italy,2011,12.2,35.9,-23.7,294.2622951
Jamaica,2010,2,1,1,50
Jamaica,2011,3,2,1,66.66666667
Jamaica,2012,0,2,-2,
Japan,2010,1.03394,0.65026,0.38368,62.89146372
Japan,2011,0.6376,1.10293,-0.46533,172.9814931
Japan,2012,0.67206,1.16587,-0.49381,173.4770705
"Korea, South",2012,7.04,6.5,0.54,92.32954545
"Korea, South",2010,6.5,6.6,-0.1,101.5384615
"Korea, South",2011,6.3,6.5,-0.2,103.1746032
Latvia,2010,1.1,0.7,0.4,63.63636364
Latvia,2012,1.26,1.1,0.16,87.3015873
Latvia,2011,1,1.1,-0.1,110
Lithuania,2010,2.5,1.2,1.3,48
Lithuania,2011,1.9,1.1,0.8,57.89473684
Lithuania,2012,1.852,1.24,0.612,66.95464363
Malaysia,2010,1.6226,0.02126,1.60134,1.31024282
Malaysia,2011,1.03441,0.04605,0.98836,4.451813111
Malaysia,2012,2.85949,2.57869,0.2808,90.18006707
Netherlands,2011,13.6,8.8,4.8,64.70588235
Netherlands,2010,9.5,6.6,2.9,69.47368421
Netherlands,2012,9.4,8.77,0.63,93.29787234
Norway,2011,0.001,2.6,-2.599,260000
Norway,2010,0.001,2.7,-2.699,270000
Norway,2012,0,5.6,-5.6,
Paraguay,2010,2.3,2.4,-0.1,104.3478261
Paraguay,2011,2.22,2.62,-0.4,118.018018
Paraguay,2012,2.3,2.84,-0.54,123.4782609
Peru,2010,2.2,2.5,-0.3,113.6363636
Peru,2011,2.7,5,-2.3,185.1851852
Peru,2012,3.07,6.1,-3.03,198.6970684
Philippines,2010,3.4,4.75613,-1.35613,139.8861765
Philippines,2011,3,5.89347,-2.89347,196.449
Philippines,2012,2.59,6.70339,-4.11339,258.8181467
Poland,2012,13.3,19.6,-6.3,147.3684211
Poland,2010,10.5,18,-7.5,171.4285714
Poland,2011,9.7,20,-10.3,206.185567
Portugal,2010,6,7,-1,116.6666667
Portugal,2012,5.2,6.4,-1.2,123.0769231
Portugal,2011,5.5,7,-1.5,127.2727273
Romania,2011,1.9,5.2,-3.3,273.6842105
Romania,2012,1.9,5.2,-3.3,273.6842105
Romania,2010,1.7,6.4,-4.7,376.4705882
Slovakia,2010,4,4,0,100
Slovakia,2011,3.2,4.1,-0.9,128.125
Slovakia,2012,2.695,3.8,-1.105,141.0018553
Spain,2010,24,34,-10,141.6666667
Spain,2011,19,40,-21,210.5263158
Spain,2012,16.6,35.3,-18.7,212.6506024
Sweden,2011,8.4,12,-3.6,142.8571429
Sweden,2010,7.5,11,-3.5,146.6666667
Sweden,2012,7.9,12.4,-4.5,156.9620253
Taiwan,2011,1.5,1.7,-0.2,113.3333333
Taiwan,2012,1.1,2.4,-1.3,218.1818182
Taiwan,2010,0.5,2.1,-1.6,420
Thailand,2011,19.23131,19.14515,0.08616,99.5519806
Thailand,2010,19.14515,19.30024,-0.15509,100.8100746
Thailand,2012,23.62556,24.46995,-0.84439,103.5740528
Trinidad and Tobago,2011,2.2,2,0.2,90.90909091
Trinidad and Tobago,2010,0.0001,0.0001,0,100
Trinidad and Tobago,2012,0,2,-2,
United Kingdom,2011,9,27.2,-18.2,302.2222222
United Kingdom,2010,9,29,-20,322.2222222
United Kingdom,2012,5.8,26.2,-20.4,451.7241379
United States,2011,971.61918,898.05205,73.56713,92.42839875
United States,2012,939.558,898,41.558,95.57685635
United States,2010,889.444,856.77996,32.66404,96.32758892