Last active
April 1, 2016 07:53
-
-
Save benoit74/2c5b072281a2cbf4ecbe53477bc1875e to your computer and use it in GitHub Desktop.
RTE Dataviz #2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 | |
height: 600 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.chart text { | |
fill: black; | |
font: 10px sans-serif; | |
text-anchor: middle; | |
} | |
.arc text { | |
font: 10px sans-serif; | |
text-anchor: middle; | |
} | |
.arc path { | |
stroke: #fff; | |
} | |
div, table { | |
font: 10px sans-serif; | |
} | |
h1, div, table { | |
width: 100%; | |
text-align: center; | |
} | |
h1 { | |
font: 20px sans-serif; | |
margin: 5px; | |
} | |
.source { | |
margin-bottom:20px; | |
} | |
.chart text.text2 { | |
visibility:hidden; | |
font: 12px sans-serif; | |
} | |
.chart text.total { | |
font: 15px sans-serif; | |
} | |
form { | |
font: 12px sans-serif; | |
font-weight: bold; | |
} | |
g:hover>path { | |
fill-opacity: 0.8 | |
} | |
g:hover>.text2 { | |
visibility:visible | |
} | |
</style> | |
<h1>Parc de production par filière</h1> | |
<div class="source">Source : RTE</div> | |
<div> | |
<form>Année : <select id="yearSelect"></select></form> | |
<svg class="chart" id="chart1"> | |
</svg> | |
</div> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script> | |
var width = 500, | |
height = 500, | |
radius = Math.min(width, height) / 2; | |
var color = d3.scale.category10(); | |
var arc = d3.svg.arc() | |
.innerRadius(radius - 100) | |
.outerRadius(radius - 20); | |
var labelArc = d3.svg.arc() | |
.outerRadius(radius - 60) | |
.innerRadius(radius - 60); | |
var pie = d3.layout.pie() | |
.sort(null) | |
.value(function(d) { return d.conso; }); | |
var svg = d3.select("#chart1") | |
.attr("width", width) | |
.attr("height", height); | |
var chart = svg.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
var total = chart.append("text") | |
.attr("class", "total"); | |
var g = chart.selectAll("g"); | |
d3.csv("parc_prod_par_filiere_s.csv", function(error, csv) { | |
if (error) throw error; | |
this.names = d3.keys(csv[0]).filter(function(key) { return key !== "Annee" && key !== "Parc thermique fossile (MW)"; }); | |
var prods = csv | |
.map(function(d) { | |
return { | |
annee: d.Annee, | |
values: names.map(function(name) { | |
return {name: name, conso: +d[name]}; | |
}) | |
}; | |
}).sort(function(a, b) { return b.annee - a.annee}); | |
var option = d3.select("#yearSelect") | |
.on("change", change) | |
.selectAll("option") | |
.data(prods) | |
.enter() | |
.append("option"); | |
option | |
.attr("value", function(d) { return d.annee; }) | |
.text(function(d) { return d.annee; }) | |
.on("change", change) | |
.filter(function(d, i) { return !i; }) | |
.each(change) | |
.property("checked", true); | |
function change(year) { | |
// This is a trick, necessary since the 'change' has to be attached to the whole | |
// select and not to individual options. We hence have to retrieve the | |
// current data matching currently selected value | |
if (!year) { | |
var year = prods.filter(function(d) { return d.annee == d3.event.target.value })[0]; | |
} | |
var data0 = g.data(), | |
data1 = pie(year.values); | |
g = g.data(data1, key); | |
var gEnter = g.enter().append("g"); | |
gEnter.append("path") | |
.each(function(d, i) { this._current = findNeighborArc(i, data0, data1, key) || d; }) | |
.attr("fill", function(d) { return color(d.data.name); }); | |
gEnter.append("text") | |
.attr("class", "text2") | |
.attr("transform", "translate(0, 30)"); | |
gEnter.append("text") | |
.attr("class", "text1") | |
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")";}); | |
g.select(".text1") | |
.transition() | |
.duration(750) | |
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")";}) | |
.text(function(d) { | |
var cons = Math.round(d.data.conso / 1000); | |
return d.data.conso > 0 ? cons + " GW" : ""; | |
}); | |
g.select(".text2") | |
.transition() | |
.duration(750) | |
.text(function(d) { | |
var label = d.data.name; | |
label = label.replace("(MW)", " : " + Math.round(d.data.conso) + " MW"); | |
return d.data.conso > 0 ? label : ""; | |
}); | |
g.exit().select("path") | |
.datum(function(d, i) { return findNeighborArc(i, data1, data0, key) || d; }) | |
.transition() | |
.duration(750) | |
.attrTween("d", arcTween) | |
.remove(); | |
g.select("path").transition() | |
.duration(750) | |
.attrTween("d", arcTween); | |
total.text("Total : " + Math.round(d3.sum(data1, function(d) { return d.data.conso})/1000) + " GW"); | |
} | |
}); | |
function key(d) { | |
return d.data.name; | |
} | |
function findNeighborArc(i, data0, data1, key) { | |
var d; | |
return (d = findPreceding(i, data0, data1, key)) ? {startAngle: d.endAngle, endAngle: d.endAngle} | |
: (d = findFollowing(i, data0, data1, key)) ? {startAngle: d.startAngle, endAngle: d.startAngle} | |
: null; | |
} | |
// Find the element in data0 that joins the highest preceding element in data1. | |
function findPreceding(i, data0, data1, key) { | |
var m = data0.length; | |
while (--i >= 0) { | |
var k = key(data1[i]); | |
for (var j = 0; j < m; ++j) { | |
if (key(data0[j]) === k) return data0[j]; | |
} | |
} | |
} | |
// Find the element in data0 that joins the lowest following element in data1. | |
function findFollowing(i, data0, data1, key) { | |
var n = data1.length, m = data0.length; | |
while (++i < n) { | |
var k = key(data1[i]); | |
for (var j = 0; j < m; ++j) { | |
if (key(data0[j]) === k) return data0[j]; | |
} | |
} | |
} | |
function arcTween(d) { | |
var i = d3.interpolate(this._current, d); | |
this._current = i(0); | |
return function(t) { return arc(i(t)); }; | |
} | |
</script> | |
<script id="__bs_script__">//<![CDATA[ | |
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.2.js'><\/script>".replace("HOST", location.hostname)); | |
//]]></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Annee | Parc thermique fossile (MW) | Parc fioul (MW) | Parc charbon (MW) | Parc gaz (MW) | Parc hydraulique (MW) | Parc nucleaire (MW) | Parc solaire (MW) | Parc eolien (MW) | Parc bioenergie (MW) | |
---|---|---|---|---|---|---|---|---|---|---|
2008 | 24665 | 25360 | 63260 | 30 | 3327 | 986.317 | ||||
2012 | 27826.48 | 9385.695 | 7913.5 | 10527.285 | 25407.031 | 63130 | 3727 | 7536 | 1345.922 | |
2010 | 27399 | 10494 | 7942 | 8963 | 25392 | 63130 | 878 | 5762 | 1223.856 | |
2014 | 23967.618 | 8621 | 4508 | 10838 | 25421.26 | 63130 | 5297 | 9313 | 1598.053 | |
2011 | 27812.99 | 10332 | 7942 | 9539 | 25393.9 | 63130 | 2584 | 6714 | 1236.966 | |
2013 | 25706.652 | 8948 | 6359 | 10400 | 25433.978 | 63130 | 4366 | 8157 | 1496.064 | |
2009 | 26154.624 | 25356.934 | 63130 | 190 | 4573 | 1028.96582 | ||||
2015 | 22552.881 | 8645 | 3007 | 10901 | 25420.714 | 63130 | 6191 | 10312 | 1702.933 | |
2007 | 24055 | 25413 | 63260 | 7 | 2252 | 960 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment