grouped charts stocks

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
   body {
    font-family: sans-serif;
  }
  
  form {
  	position: absolute;
  	left: 200px;
  	top: 10px;
	}

label {
  	display: block;
	}
  
  .xAxis .domain {
    display: none;
  }
  </style>
</head>

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(["#98abc5", "#8a89a6", "#7b6888", "#6b486b"]);

// read from stocks.csv

d3.csv("stocks.csv", function(data) {

var nest_by_year = d3.nest()
        .key(function(d) {return formatTime(parseDate(d.date)); })
        .entries(data);

//display year
      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
        });
      });

var keys = d3.keys(Final_data[0]).slice(1);
      console.log(keys)

var SumData = [];
      Final_data.forEach(function(d){
        SumData.push(d3.sum(keys, function(key) {return d[key]; }))
      });

x.domain(Final_data.map(function(d) {return d.year; }));
      x1.domain(keys).range([0, x.bandwidth()]);
      yBar.domain([0, d3.max(Final_data, function(d) {return d3.max(keys, function(key) {return d[key]; }); })]);
      yStack.domain([0, d3.max(SumData)]);

var group = g
        .selectAll("g")
        .data(d3.stack().keys(keys)(Final_data))
        .enter().append("g")
        .attr("fill", function(d) {return color(d.key); });

g.append("g")
        .attr("class", "xAxis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).tickSize(0));

var yAxis = g.append("g")
        .call(d3.axisLeft(yStack));

yAxis.append("text")
         .attr("x", -35)
         .attr("y", -15)
         .attr("dy", "0.32em")
         .attr("fill", "#000")
         .attr("font-weight", "bold")
         .attr("text-anchor", "start")
         .text("Price");

d3.selectAll("input")
        .on("click", changed);

function changed() {
        if (this.value === "grouped") GroupeIt();
        else StackIt();
      };

yAxis
          .transition()
          .call(d3.axisLeft(yBar));
      };

yAxis
          .transition()
          .call(d3.axisLeft(yStack));
      };

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

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

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