stacked to grouped bars chart

forked from mnemonico's block: stacked to grouped bars chart

<!DOCTYPE html>
<style>
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  form {
  	position: absolute;
  	left: 200px;
  	top: 10px;
	}

label {
  	display: block;
	}
  
  .xAxis .domain {
    display: none;
  }
</style>
  
<body>
    
  <form>
    
  <label><input type="button" name="mode" value="grouped" checked> groupé</label>
  <label><input type="button" name="mode" value="stacked "> entassé</label>
     
   
  </form> 
 
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
/* Note*/
/*webographie : https://bl.ocks.org/mbostock/3943967*/
/*Basée sur le travail de Mike Bostock’s Blocks*/

var parseDate = d3.timeParse("%b %Y");
var formatTime = d3.timeFormat("%Y");
  
var margin = {top: 30, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
 
  
var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);
	
 
var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
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()
	.range(["#000000", "#15f40a", "#dc143c", "#0031d6"]);
  
// lecture du fichier stocks.csv
  
d3.csv("stocks.csv", function(StockData) {

var nest_by_year = d3.nest()
  	.key(function(d) {return formatTime(parseDate(d.date)); })
  	.entries(StockData);
  
  //console.log(nes_year) affichier objet 1 année inclue dans les données
	var Transitional_data = [];

nest_by_year.forEach(function(KeyYear) {
    
    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
    });
  });
  
  
//  console.log(Transitional_data) afficher l'objet 0

legend.append("path")
    .style("fill", function(d) {return color(d); })
    .attr("d", d3.symbol().type(d3.symbolSquare).size(100) )
    .attr("transform", "translate(" + width/2.5 + "," + 20 +")");

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

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