TP3

Built with blockbuilder.org

-<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
 				var n = 11; // number of samples
        var m = 4; // number of series

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

var data = d3.nest()
                	.key(function(d) 
                       {
                    		return d.date.substring(d.date.length - 4)
                			 })
                  .entries(data)
            
            data.forEach(function(item, index) {
                	data[index] = 
                    {
                    year: item.key,
                    symbols: d3.nest()
                        			 .key(function(e) {return e.symbol})
                        			 .entries(item.values)
                		}
                
                		data[index].symbols.forEach(function(el, i) 
                               {
                    						data[index].symbols[i] = {
                        										symbol: el.key,
                        										price: Math.round(d3.mean(el.values, 																														function(a) {return a.price
                        																						})*10)/10
                    																			}
                							})
            				})

data = d3.range(n).map(function(index) {
                return d3.range(m).map(function(i) {
                    return data[index].symbols[i].price 
                });
            })

var margin = {top: 20,right: 30,bottom: 30,left: 40},
                 width = 960 - margin.left - margin.right,
                 height = 500 - margin.top - margin.bottom;

var y = d3.scaleLinear()
                .domain([0, 500])
                .rangeRound([height, 0])
                .nice();

var x = d3.scaleBand()
                .rangeRound([0, width])
                .paddingInner(0.05)
                .align(0.1)
                .domain(d3.range(n));

var z = d3.scaleOrdinal()
                .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var stacked=true
          
            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 + ")");

function transitionGrouped() {
                  y.domain([0, 150])

d3.selectAll('rect').transition()
                       .duration(500)
                       .delay(function(d, i) { return i * 10; })
                       .attr("x", function(d, i) { return x(i%n) + x.bandwidth() / m * 																	this.parentNode.__data__.key })
                       .attr("width", x.bandwidth() / m)
                       .transition()
                       .attr("y", function(d) { return y(d[1] - d[0]); })
                       .attr("height", function(d) { return y(0) - y(d[1] - d[0]); });
            }

function transitionStacked() {
                  y.domain([0, 500])

d3.selectAll('rect').transition()
                       .duration(500)
                       .delay(function(d, i) { return i * 10; })
                			 .attr("height", function(d) {return y(d[0]) - y(d[1]);})
                  		 .attr("y", function(d) {return y(d[1]);})
                   		 .transition()
                       .attr("width", x.bandwidth())
                   		 .attr("x", function(d, i) {return x(i%n);})
                  
            }

})
</script>

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