hichamelhady/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<style>
    .axis .domain {
        display: none;
    }

.tooltip {
	position: absolute;
	width: 0px;
	height: 28px;
	pointer-events: none;
}

.line {
    stroke: #e53100;
    fill: none;
    stroke-width: 3;
}
</style>

<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

        var n = 6, // number of years
            m = 5; // number of symbols
				var t = d3.transition()
        var R = true;
        var data = d3.range(m).map(function() {
            return d3.range(n).map(Math.random);
        });
        var dataFormat = [];

        var v = ["red", "blue", "orange", "green", "purple", "brown", "black"];

      	var names = ["Photovoltaïque","Eolien","Cogénération","Hydraulique", "Autres"]
        d3.csv("stocks.csv", function(data) {


          // Prétraitement des données
            dataset = {}
            data.forEach(function(el, index) {
                year = +el.date.substr(el.date.length - 5);
                if (!dataset[year]) {
                    dataset[year] = {}
                    dataset[year][el.symbol] = [+el.price]
                } else {
                    if (!dataset[year][el.symbol]) {
                        dataset[year][el.symbol] = [+el.price];
                    } else {
                        dataset[year][el.symbol].push(+el.price);
                    }
                }
            });


            datasFinal = []
            for (year in dataset) {
                var temp_array = []
                for (symbol in dataset[year]) {
                    var values = dataset[year][symbol]
                    var mean_values = values.reduce(function(a, b) {
                        return a + b;
                    }) / values.length;
                    temp_array.push(mean_values);
                }
                datasFinal.push(temp_array);
            }
            dataFormat = datasFinal
            var margin = {
                    top: 20,
                    right: 30,
                    bottom: 30,
                    left: 40
                },
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

           var keys = data.columns.slice(1);
            var y = d3.scaleLinear()
                .domain([0, d3.max(datasFinal.map(function(el) {
                    return d3.sum(el)
                }))])
                .rangeRound([height, 0])
                .nice();
            var x = d3.scaleBand()
                .rangeRound([0, width])
                .paddingInner(0.3)	//space between bars
                .align(0.1)
                .domain(d3.range(n));

            var z = d3.scaleOrdinal()
                .range(["red", "blue", "orange", "green", "purple", "brown", "black"]);
            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 + ")");


          //drawing the  stacked barss
            g=svg.append("g").selectAll("g")
                .data(d3.stack().keys(d3.range(m))(dataFormat))
                .enter().append("g")
                .style("fill", function(d) {
                    return z(d.key);
                })
                .selectAll("rect")
                .data(function(d) {
                    return d;
                })
                .enter().append("rect")
                .attr("x", function(d, i) {
                    return x(i);
                })
                .attr("y", function(d) {
                    return y(d[1]);
                })
                .attr("height", function(d) {
                    return y(d[0]) - y(d[1]);
                })
                .attr("width", x.bandwidth());
    		  var xPreAxis = d3.axisBottom()
    				.scale(x)
    				.tickSize(0);
          var xAxis = g.append("g")
						  .attr("class", "x axis")
						  .attr("transform", "translate(0," + height + ")")
         		  .call(xPreAxis);

  // Add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Production d'électricité");


            svg.on("click", function() {
                svg.selectAll("g").each(function(d, index) {
                    d3.select(this).selectAll("rect").each(function(e, i) {
                        if (R) {

                            d3.select(this).transition(t).duration(500)
                                .attr("x", function() {
                                    return x(i) + ((index - 1) % 5) * x.bandwidth() / 10
                                })
                                .attr("width", function() {
                                    return x.bandwidth() / 10
                                })
                            		.transition().duration(500).delay(250)
                                .attr("y", function(d) {
                                    return height - (y(d[0]) * (m - 1) - y(d[1]) * (m - 1));
                                })
                                .attr("height", function(d) {
                                    return y(d[0]) * (m - 1) - y(d[1]) * (m - 1);
                                })
                        } else {
                            d3.select(this).transition().duration(500)
                                .attr("y", function(d) {
                                    return y(d[1]);
                                })
                                .attr("height", function(d) {
                                    return y(d[0]) - y(d[1])
                                })
                              	.transition().duration(500).delay(250)
                                .attr("x", function() {
                                        return x(i)
                                    })
                                .attr("width", function() {
                                        return x.bandwidth()
                                    });
                        }
                       svg.append("g")
      .call(d3.axisLeft(y));
  // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Production d'électricité");


                    })
                })
                R = !R;
                          })

var legend = svg.selectAll(".legend")
    .data(z.domain())
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(75," + i * 20+ ")"})


  legend.append("circle")
      .attr("cx", -10)
    	.attr("cy", 10)
    	.attr("r", 7)
      .style("fill", function(d) { return v[d]; });
  legend.append("text")
      .attr("x", 106)
      .attr("y", 10)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return names[d]; });


  var rectangle = svg.append("rect")
      .attr("x", 70)
      .attr("y", 0)
  		.attr("width", 110)
  		.attr("height", 80)
      .style("fill", "none");


        });

    var svg2 = d3.select("body").append("svg2")
      .attr("width", 960)
      .attr("height", 500)

    svg2.append("text")
      .text("Visualisation des données de la production d'électricité en France")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")


    </script>

## stocks.csv

          
            symbol
            date
            price

            
              Photovolaïque
              2011
              1561562

            
              Photovolaïque
              2012
              3032031

            
              Photovolaïque
              2013
              3458027

            
              Photovolaïque
              2014
              4408125

            
              Photovolaïque
              2015
              6098587

            
              Photovolaïque
              2016
              6764322

            
              Eolienne
              2011
              5031065

            
              Eolienne
              2012
              5960016

            
              Eolienne
              2013
              5853212

            
              Eolienne
              2014
              5950079

            
              Eolienne
              2015
              7670454

            
              Eolienne
              2016
              9882936

            
              Hydraulique
              2011
              2645365

            
              Hydraulique
              2012
              3230640

            
              Hydraulique
              2013
              3877116

            
              Hydraulique
              2014
              3985045

            
              Hydraulique
              2015
              3950660

            
              Hydraulique
              2016
              4569292

            
              Cogénération
              2011
              4876938

            
              Cogénération
              2012
              4479363

            
              Cogénération
              2013
              4601999

            
              Cogénération
              2014
              3778965

            
              Cogénération
              2015
              3936038

            
              Cogénération
              2016
              4507323

            
              Autres
              2011
              2947784

            
              Autres
              2012
              2177777

            
              Autres
              2013
              2527825

            
              Autres
              2014
              3305664

            
              Autres
              2015
              3128894

            
              Autres
              2016
              4007312
	<!DOCTYPE html>
	<style>
	.axis .domain {
	display: none;
	}

	.tooltip {
	position: absolute;
	width: 0px;
	height: 28px;
	pointer-events: none;
	}

	.line {
	stroke: #e53100;
	fill: none;
	stroke-width: 3;
	}
	</style>

	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var n = 6, // number of years
	m = 5; // number of symbols
	var t = d3.transition()
	var R = true;
	var data = d3.range(m).map(function() {
	return d3.range(n).map(Math.random);
	});
	var dataFormat = [];

	var v = ["red", "blue", "orange", "green", "purple", "brown", "black"];

	var names = ["Photovoltaïque","Eolien","Cogénération","Hydraulique", "Autres"]
	d3.csv("stocks.csv", function(data) {


	// Prétraitement des données
	dataset = {}
	data.forEach(function(el, index) {
	year = +el.date.substr(el.date.length - 5);
	if (!dataset[year]) {
	dataset[year] = {}
	dataset[year][el.symbol] = [+el.price]
	} else {
	if (!dataset[year][el.symbol]) {
	dataset[year][el.symbol] = [+el.price];
	} else {
	dataset[year][el.symbol].push(+el.price);
	}
	}
	});


	datasFinal = []
	for (year in dataset) {
	var temp_array = []
	for (symbol in dataset[year]) {
	var values = dataset[year][symbol]
	var mean_values = values.reduce(function(a, b) {
	return a + b;
	}) / values.length;
	temp_array.push(mean_values);
	}
	datasFinal.push(temp_array);
	}
	dataFormat = datasFinal
	var margin = {
	top: 20,
	right: 30,
	bottom: 30,
	left: 40
	},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var keys = data.columns.slice(1);
	var y = d3.scaleLinear()
	.domain([0, d3.max(datasFinal.map(function(el) {
	return d3.sum(el)
	}))])
	.rangeRound([height, 0])
	.nice();
	var x = d3.scaleBand()
	.rangeRound([0, width])
	.paddingInner(0.3) //space between bars
	.align(0.1)
	.domain(d3.range(n));

	var z = d3.scaleOrdinal()
	.range(["red", "blue", "orange", "green", "purple", "brown", "black"]);
	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 + ")");


	//drawing the stacked barss
	g=svg.append("g").selectAll("g")
	.data(d3.stack().keys(d3.range(m))(dataFormat))
	.enter().append("g")
	.style("fill", function(d) {
	return z(d.key);
	})
	.selectAll("rect")
	.data(function(d) {
	return d;
	})
	.enter().append("rect")
	.attr("x", function(d, i) {
	return x(i);
	})
	.attr("y", function(d) {
	return y(d[1]);
	})
	.attr("height", function(d) {
	return y(d[0]) - y(d[1]);
	})
	.attr("width", x.bandwidth());
	var xPreAxis = d3.axisBottom()
	.scale(x)
	.tickSize(0);
	var xAxis = g.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xPreAxis);

	// Add the y Axis
	svg.append("g")
	.call(d3.axisLeft(y));
	// text label for the y axis
	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Production d'électricité");


	svg.on("click", function() {
	svg.selectAll("g").each(function(d, index) {
	d3.select(this).selectAll("rect").each(function(e, i) {
	if (R) {

	d3.select(this).transition(t).duration(500)
	.attr("x", function() {
	return x(i) + ((index - 1) % 5) * x.bandwidth() / 10
	})
	.attr("width", function() {
	return x.bandwidth() / 10
	})
	.transition().duration(500).delay(250)
	.attr("y", function(d) {
	return height - (y(d[0]) * (m - 1) - y(d[1]) * (m - 1));
	})
	.attr("height", function(d) {
	return y(d[0]) * (m - 1) - y(d[1]) * (m - 1);
	})
	} else {
	d3.select(this).transition().duration(500)
	.attr("y", function(d) {
	return y(d[1]);
	})
	.attr("height", function(d) {
	return y(d[0]) - y(d[1])
	})
	.transition().duration(500).delay(250)
	.attr("x", function() {
	return x(i)
	})
	.attr("width", function() {
	return x.bandwidth()
	});
	}
	svg.append("g")
	.call(d3.axisLeft(y));
	// text label for the y axis
	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Production d'électricité");


	})
	})
	R = !R;
	})

	var legend = svg.selectAll(".legend")
	.data(z.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(75," + i * 20+ ")"})


	legend.append("circle")
	.attr("cx", -10)
	.attr("cy", 10)
	.attr("r", 7)
	.style("fill", function(d) { return v[d]; });
	legend.append("text")
	.attr("x", 106)
	.attr("y", 10)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return names[d]; });



	var rectangle = svg.append("rect")
	.attr("x", 70)
	.attr("y", 0)
	.attr("width", 110)
	.attr("height", 80)
	.style("fill", "none");


	});

	var svg2 = d3.select("body").append("svg2")
	.attr("width", 960)
	.attr("height", 500)

	svg2.append("text")
	.text("Visualisation des données de la production d'électricité en France")
	.attr("y", 200)
	.attr("x", 120)
	.attr("font-size", 36)
	.attr("font-family", "monospace")



	</script>
symbol	date	price
Photovolaïque	2011	1561562
Photovolaïque	2012	3032031
Photovolaïque	2013	3458027
Photovolaïque	2014	4408125
Photovolaïque	2015	6098587
Photovolaïque	2016	6764322
Eolienne	2011	5031065
Eolienne	2012	5960016
Eolienne	2013	5853212
Eolienne	2014	5950079
Eolienne	2015	7670454
Eolienne	2016	9882936
Hydraulique	2011	2645365
Hydraulique	2012	3230640
Hydraulique	2013	3877116
Hydraulique	2014	3985045
Hydraulique	2015	3950660
Hydraulique	2016	4569292
Cogénération	2011	4876938
Cogénération	2012	4479363
Cogénération	2013	4601999
Cogénération	2014	3778965
Cogénération	2015	3936038
Cogénération	2016	4507323
Autres	2011	2947784
Autres	2012	2177777
Autres	2013	2527825
Autres	2014	3305664
Autres	2015	3128894
Autres	2016	4007312