D3 Examples - Interactive visualization of stocks

xxxxxxxxxx
 
<!DOCTYPE html>
<style>
    .axis .domain {
        display: none;
    }
 
.tooltip {
    position: absolute;
    width: 0px; 
    height: 28px;
    pointer-events: none;
}
  
.line {
    stroke: #e53100;
    fill: none;
    stroke-width: 3;
}  
</style>
​
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
        
        var n = 11, // number of years
            m = 4; // number of symbols
                var t = d3.transition()
        var R = true;
        var data = d3.range(m).map(function() {
            return d3.range(n).map(Math.random);
        });
        var dataFormat = [];
        
        var v = ["red", "blue", "orange", "green", "purple", "brown", "black"];
      
        var names = ["MSFT","AMZN","IBM","AAPL"]
        d3.csv("stocks.csv", function(data) {
                            
          
          // Prétraitement des données
            dataset = {}
            data.forEach(function(el, index) {
                year = +el.date.substr(el.date.length - 4);
                if (!dataset[year]) {
                    dataset[year] = {}
                    dataset[year][el.symbol] = [+el.price]
                } else {
                    if (!dataset[year][el.symbol]) {
                        dataset[year][el.symbol] = [+el.price];
                    } else {
                        dataset[year][el.symbol].push(+el.price);
                    }
                }
            });
          
          
            datasFinal = []
            for (year in dataset) {
                var temp_array = []
                for (symbol in dataset[year]) {
                    var values = dataset[year][symbol]
                    var mean_values = values.reduce(function(a, b) {
                        return a + b;
                    }) / values.length;
                    temp_array.push(mean_values);
                }
                datasFinal.push(temp_array);
            }
            dataFormat = datasFinal
            var margin = {
                    top: 20,
                    right: 30,
                    bottom: 30,
                    left: 40
                },
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;
          
           var keys = data.columns.slice(1);
            var y = d3.scaleLinear()
                .domain([0, d3.max(datasFinal.map(function(el) {
                    return d3.sum(el)
                }))])
                .rangeRound([height, 0])
                .nice();
            var x = d3.scaleBand()
                .rangeRound([0, width])
                .paddingInner(0.3)  //space between bars
                .align(0.1)
                .domain(d3.range(n));
            var z = d3.scaleOrdinal()
                .range(["red", "blue", "orange", "green", "purple", "brown", "black"]);
            var svg = d3.select("body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
          
          //drawing the  stacked barss
            g=svg.append("g").selectAll("g")
                .data(d3.stack().keys(d3.range(m))(dataFormat))
                .enter().append("g")
                .style("fill", function(d) {
                    return z(d.key);
                })
                .selectAll("rect")
                .data(function(d) {
                    return d;
                })
                .enter().append("rect")
                .attr("x", function(d, i) {
                    return x(i);
                })
                .attr("y", function(d) {
                    return y(d[1]);
                })
                .attr("height", function(d) {
                    return y(d[0]) - y(d[1]);
                })
                .attr("width", x.bandwidth());
         
  // Add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("price");
          
         
            svg.on("click", function() {
                svg.selectAll("g").each(function(d, index) {
                    d3.select(this).selectAll("rect").each(function(e, i) {
                        if (R) {
                          
                            d3.select(this).transition(t).duration(500)
                                .attr("x", function() {
                                    return x(i) + ((index - 1) % 4) * x.bandwidth() / 10
                                })
                                .attr("width", function() {
                                    return x.bandwidth() / 10
                                })
                                    .transition().duration(500).delay(250)
                                .attr("y", function(d) {
                                    return height - (y(d[0]) * (m - 1) - y(d[1]) * (m - 1));
                                })
                                .attr("height", function(d) {
                                    return y(d[0]) * (m - 1) - y(d[1]) * (m - 1);
                                })
                        } else {
                            d3.select(this).transition().duration(500)
                                .attr("y", function(d) {
                                    return y(d[1]);
                                })
                                .attr("height", function(d) {
                                    return y(d[0]) - y(d[1])
                                })
                                .transition().duration(500).delay(250)
                                .attr("x", function() {
                                        return x(i)
                                    })
                                .attr("width", function() {
                                        return x.bandwidth()
                                    });
                        }
                       svg.append("g")
      .call(d3.axisLeft(y));
  // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("price");
                      
                      
                    })
                })
                R = !R;
                          })
           
var legend = svg.selectAll(".legend")
    .data(z.domain())
  .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(75," + i * 20+ ")"})
   
    
  legend.append("circle")
      .attr("cx", 10)
        .attr("cy", 10)
        .attr("r", 7)
      .style("fill", function(d) { return v[d]; });
  legend.append("text")
      .attr("x", 75)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return names[d]; });
  
  
  
  var rectangle = svg.append("rect")
      .attr("x", 70)
      .attr("y", 0)
        .attr("width", 110)
        .attr("height", 80)
      .style("fill", "none");
        
            
        });
      
      
      
      
    </script>
    