D3 Examples - Stacked to Grouped

xxxxxxxxxx
 
<!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 button="stacked";   svg.append("circle").attr("cx",width/2).attr("cy","20").attr("r","20").attr("fill","white").on("click", function() {
    if (button=="stacked"){
​
        Total=d3.max(dataset, function(d){return d.price});
        console.log(dataset, 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)/48)
              .attr("height",function(d){
                  return d.price*(height-2*padding)/Total})
              .attr("x", function(d, index){ 
                    return xscale(i)+index*(width-2*padding)/48})
              .attr("y", function(d){ return yscale(d.price)})
                    /*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");
      
      button="grouped";
      
      
    } else {     
​
        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");
      
      button="stacked";
    }
    });
    
    
    
  });
  
​
</script>
    