finl prod

<!DOCTYPE html>
<style>

.axis .domain {
  display: none;
}

</style>
<body>
<div>
  <form>
  <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
  <label><input type="radio" name="mode" value="grouped"> Grouped</label>
</form>
  <div id="diagprod" style="background-color: snow;  display: inline-block;border: solid black 2px;">
  </div>

</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// References :
--> Mainly inspired by https://bl.ocks.org/mbostock/3943967 (Mike Bostock’s Block 3943967)
  
var margin3 = {top: 15, right: 19, bottom: 30, left: 50},
    width = 865 - margin3.left - margin3.right,
    height = 500 - margin3.top - margin3.bottom;
 
// Scale definition
var x = d3.scaleBand()
	.range([0, width])
	.padding(0.4);
  
var x1 = d3.scaleBand()
  .padding(0.1);
  
var yBar = d3.scaleLinear()
	.range([height, 0]);
  
var yStack = d3.scaleLinear()
  .range([height, 0]);

var color = d3.scaleOrdinal()
	.domain(["Photovoltaïque","Eolien","Cogénération","Hydraulique", "Autres"]) 	// Defined here, doesn't work into csv loop...
	.range(["blue", "orange", "green", "purple", "brown"]);

// Axis (Pre)definition
var xPreAxis = d3.axisBottom()
    .scale(x)
    .tickSize(0);

var yPreAxis = d3.axisLeft(yStack);

// Graphical environment
var svgp = d3.select("#diagprod").append("svg")
	.attr("width", width + margin3.left + margin3.right)
	.attr("height", height + margin3.top + margin3.bottom);

// Group for all plots
var g = svgp.append("g")
	.attr("transform", "translate(" + margin3.left + "," + margin3.top + ")");	
  
d3.csv("stocks.csv", function(data) {
	
	//**************************************************//
	//								Data Preprocessing 								//
	//**************************************************//
	
	// Parse time
	var parseTime = d3.timeParse("%Y");
	var formatTime = d3.timeFormat("%Y");

// Nest Data by year
	var nest_by_year = d3.nest()
  	.key(function(d) {return formatTime(parseTime(d.date)); })
  	.entries(data);
  
	var transitional_data = [];

nest_by_year.forEach(function(KeyYear) {
    
	// Nest data by symbol ("MSFT","AMZN","IBM", "AAPL")
    var nest_by_symbol = d3.nest()
    	.key(function(d) {return d.symbol; })
    	.rollup(function(v) {return d3.mean(v,function(d) {return d.price; })})
    	.object(KeyYear.values);
    
    transitional_data.push({
      key: +KeyYear.key,
      values: nest_by_symbol
    });
  });
  
  var final_data = transitional_data.map(function(d) {
    var merged = { year: d.key };

// Copy each key-val pair of d.values into merged
    Object.keys(d.values).forEach(function(key) {
      merged[key] = d.values[key];
    });
    return merged;
  });
  
	// Get names and update scales
	var companiesNames = d3.keys(final_data[0]).slice(1);
  
	var totals = [];
	final_data.forEach(function(d){
		totals.push(d3.sum(companiesNames, function(key) {return d[key]; }))
	});
  
	x.domain(final_data.map(function(d) {return d.year; }));
	x1.domain(companiesNames).range([0, x.bandwidth()]);
	yBar.domain([0, d3.max(final_data, function(d) {return d3.max(companiesNames, function(key) {return d[key]; }); })]);
	yStack.domain([0, d3.max(totals)]);

//**************************************************//
	//						Legend 						//
	//**************************************************//

var legend = svgp.selectAll(".legend")
		  .data(color.domain().reverse())
		  .enter()
		  .append("g")
		  .attr("class", "legend")
		  .attr("transform", function(d,i) { return "translate(-800," + (i+1)* 25 + ")"; })
		  .style("opacity","1");
  
			svgp.append("text")
         .attr("x", (width / 3.))             
        .attr("y", 0 + 2.5*(margin3.top))
        .style("font-size", "30px") 
        .style("text-decoration", "underline")  
        .text("Energie annuelle produite en MWh");
  
	  legend.append("rect")
		  .attr("x", width +100)
		  .attr("width", 18)
		  .attr("height", 18)
		  .style("fill", function(d) { return color(d); });

legend.append("text")
		  .attr("x", width +210)
		  .attr("y", 9)
		  .attr("dy", ".35em")
		  .style("text-anchor", "end")
		  .text(function(d) {return d; });
</script>

https://d3js.org/d3.v4.min.js