d3intro_ex07

Intro d3js

### Example07 - Scalable barChart

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Intro d3js examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      .existing {color: blue;}
      .new {color: green;}
    </style>
  </head>
  <body>
    <h1>Intro d3js - example07</h1>
    
    <script type="text/javascript">
        //loading a csv file
      d3.csv("tfl_passengers.csv", function(data) {
        //use the nest method to group by year and count the locations.
        var total = d3.nest()
                      .key(function(d) { return d.period; })
                      .sortKeys(d3.ascending)
                      .rollup(function(d) { 
                        var sum = d.reduce(function(prev,current){
                                      return parseInt(+(current.bus) + prev);
                                    }, 0);
                        return sum;})
                      .entries(data);
        
                
        //Width and height
        var w = 800;
        var h = 500;
        var barPadding = 1;
        var len = total.length;
        
        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
            
        //Bind data
        var rect = svg.selectAll("rect")
                      .data(total);
        
        //For every new created rectangle visualize
        rect.enter()
            .append("rect")
            .attr("x", function(d,i) {return i * (w/len);})
            .attr("y", function(d) {return h-(d.values/10);})
            .attr("width", function(d) {return (w/len) - barPadding;})
            .attr("height", function(d,i) {return d.values / 10+"px";})
            .style("fill",function(d,i) {
                if (i > 1) {
                    return "#FF0000";
                }
                else {
                    return "#000000";
                }
                });
        }); //end of csv method
    </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js