Stacked bar chart v4 Stocks

forked from romsson's block: Stacked bar chart v4

<!DOCTYPE html>
<style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis path,
		.axis line {
    fill: none;
    stroke: rgb(251,230,146);
    shape-rendering: crispEdges;
		}
    
    .axis text {
      fill : rgb(251,230,146)
    }

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

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

if (err){
      console.log("ERREUR !");
    } else {
      console.log("données chargées");
    }

width = 700;
    height = 500;
    var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height",height)
    .style("background", "rgb(0,0,60)")
    .attr("transform","translate(125,0)");
    
    //Selection de la premiere annee seulement
    var dataset=[];
    for (i=0; i<12; i++) {
      dataset[i]=data[i];
    };
    for (i=12*10+3; i<12*10+3+12; i++) {
      dataset.push(data[i]);
    };
    for (i=12*20+6; i<12*20+6+12; i++) {
      dataset.push(data[i]);
    };
    for (i=12*30+9; i<12*30+9+12; i++) {
      dataset.push(data[i]);
    };
    
		var total=[];
    for(i=0;i<12;i++){
      total[i]=parseInt(dataset[i].price) + parseInt(dataset[i+12].price) + parseInt(dataset[i+24].price) + parseInt(dataset[i+36].price)
    }
    Total=d3.max(total);
    
    padding=30;      
    var xscale = d3.scaleLinear()
      .domain([0, 11])
      .range([0+padding,width-padding-(width-2*padding)/12]);

var yscale = d3.scaleLinear() 
      .domain([0, Total])
      .range([height-padding,0+padding]);

for (i=0;i<12;i++) {
      var donnees=[]
      for (j=0;j<4;j++) {
        donnees.push(dataset[12*j+i])}
		//donnees renvoie, chaque mois, les actions des 4 entreprises
		color=["rgb(15,15,15)","rgb(65,65,65)","rgb(105,105,105)","rgb(150,150,150)"];
      var rectangles = svg.selectAll("rect"+i.toString()).data(donnees).enter().append("rect");
      rectangles.attr("width", (width-2*padding)/12)
      		.attr("height",function(d){
        			return d.price*(height-2*padding)/Total})
      		.attr("x", xscale(i))
      		.attr("y", function(d, index){
              var prix=0;
              for (k=0;k<index;k++){
                prix+=parseInt(donnees[k].price);
              } prix+=parseInt(d.price);
              return yscale(prix);})
      		.attr("stroke", "rgb(0,0,255)")
      		.attr("fill",function(d,index){ return color[index]});
      
      
    }
    
    
    
    var xAxis = d3.axisBottom(xscale);
    var yAxis = d3.axisLeft(yscale);

var test = svg.append("g")
      .attr("class", "axis")
    	.attr("id","axisx")
      .attr("transform", "translate(0, "+ (height-padding) + ")")
      .call(xAxis);
    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate("+ padding + ",0)")
      .call(yAxis);
    
   svg.append("text").attr("x", "600").attr("y", "120").text("MSFT").style("fill",color[0]).style("stroke","rgb(150,150,255)").style("font-weight", "bold").style("font-size","30px");
    svg.append("text").attr("x", "600").attr("y", "90").text("AMZN").style("fill",color[1]).style("stroke","rgb(150,150,255)").style("font-weight", "bold").style("font-size","30px");
    svg.append("text").attr("x", "600").attr("y", "60").text("IBM").style("fill",color[2]).style("stroke","rgb(150,150,255)").style("font-weight", "bold").style("font-size","30px");
    svg.append("text").attr("x", "600").attr("y", "30").text("AAPL").style("fill",color[3]).style("stroke","rgb(150,150,255)").style("font-weight", "bold").style("font-size","30px");
    
    
  });

</script>

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