benoit74/.block

## .block
license: gpl-3.0
height: 600

## index.html
<!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;
}

.chart {
  margin-top:20px;
}


</style>
<h1>Parc de production par filière (2010 à 2015)</h1>
<div>Source : RTE</div>
<div>Puissance totale disponible en France, exprimée en GW</div>
<div class="chart" id="chart1"></div>
<table class="legend" id="legend1"></table>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var chart = d3.select("#chart1");
var legend = d3.select("#legend1");
var height = 200;
var width = 200;
var radius = 70;

var colors = d3.scale.category10();

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(0);

var labelArc = d3.svg.arc()
    .outerRadius(radius + 7)
    .innerRadius(radius + 7);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.conso; });

d3.csv("parc_prod_par_filiere_s.csv", function(error, csv) {
  if (error) throw error;

  var names = d3.keys(csv[0]).filter(function(key) { return key !== "Annee" && key !== "Parc thermique fossile (MW)"; });

  var prods = csv
  .filter(function(d) { return d.Annee >= 2010 })
  .map(function(d) {
    return {
      annee: d.Annee,
      values: names.map(function(name) {
        return {name: name, conso: +d[name]};
      })
    };
  }).sort(function(a, b) { return a.annee - b.annee});

  console.log(prods);

  var texts = chart.selectAll("svg").data(prods);

  var row = texts.enter()
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "arc")
    .append("g")
    .attr("transform","translate(100,0)");

  row.append("text")
    .attr("y","10")
    .text( function (d) { return d.annee; });

  var prod = row.selectAll("g").data(function(d) { return pie(d.values) })
    .enter()
    .append("g")
    .attr("transform", "translate(0,100)");

  prod.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return colors(d.data.name); });

  prod.append("text")
      .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return Math.round(d.data.conso / 1000); });

  legend.selectAll("tr").data(names)
    .enter()
    .append("tr")
    .style("color",function(d) {return colors(d);})
    .append("td")
    .text(function(d) { return d });

});

</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>

## parc_prod_par_filiere_s.csv

          
            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

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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;
	}

	.chart {
	margin-top:20px;
	}


	</style>
	<h1>Parc de production par filière (2010 à 2015)</h1>
	<div>Source : RTE</div>
	<div>Puissance totale disponible en France, exprimée en GW</div>
	<div class="chart" id="chart1"></div>
	<table class="legend" id="legend1"></table>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>

	var chart = d3.select("#chart1");
	var legend = d3.select("#legend1");
	var height = 200;
	var width = 200;
	var radius = 70;

	var colors = d3.scale.category10();

	var arc = d3.svg.arc()
	.outerRadius(radius)
	.innerRadius(0);

	var labelArc = d3.svg.arc()
	.outerRadius(radius + 7)
	.innerRadius(radius + 7);

	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d.conso; });

	d3.csv("parc_prod_par_filiere_s.csv", function(error, csv) {
	if (error) throw error;

	var names = d3.keys(csv[0]).filter(function(key) { return key !== "Annee" && key !== "Parc thermique fossile (MW)"; });

	var prods = csv
	.filter(function(d) { return d.Annee >= 2010 })
	.map(function(d) {
	return {
	annee: d.Annee,
	values: names.map(function(name) {
	return {name: name, conso: +d[name]};
	})
	};
	}).sort(function(a, b) { return a.annee - b.annee});

	console.log(prods);

	var texts = chart.selectAll("svg").data(prods);

	var row = texts.enter()
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("class", "arc")
	.append("g")
	.attr("transform","translate(100,0)");

	row.append("text")
	.attr("y","10")
	.text( function (d) { return d.annee; });

	var prod = row.selectAll("g").data(function(d) { return pie(d.values) })
	.enter()
	.append("g")
	.attr("transform", "translate(0,100)");

	prod.append("path")
	.attr("d", arc)
	.style("fill", function(d) { return colors(d.data.name); });

	prod.append("text")
	.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.text(function(d) { return Math.round(d.data.conso / 1000); });

	legend.selectAll("tr").data(names)
	.enter()
	.append("tr")
	.style("color",function(d) {return colors(d);})
	.append("td")
	.text(function(d) { return d });

	});

	</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>
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