D3 Examples

xxxxxxxxxx
 
-<!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 + ")");
​
            var g= svg.append("g").selectAll("g")
                            .data(d3.stack().keys(d3.range(m))(data))
                            .enter().append("g")
                            .style("fill", function(d) {return z(d.key);})
               
              
              
            var rect=  g.selectAll("rect")
                                .data(function(d) {return d;})
                                .enter().append("rect")
                                .attr("x", function(d, i) {return x(i);})
                                    .attr("height", height)
                                    .attr("y", height + margin.top)
                                .attr("width", x.bandwidth())
                                                .on("click",onclick);
            
            rect.transition()
                    .duration(1000)
                .delay(function(d, i) { return 800 - i * 80; })
                .attr("y", function(d) {return y(d[1]);})
                .attr("height", function(d) {return y(d[0]) - y(d[1]);})
          
                        function onclick(){
              if(stacked) {transitionGrouped(),stacked=!stacked}
              else {transitionStacked(), stacked=!stacked}
            }
​
            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>
​
    