d3intro_ex06

Intro d3js

### Example06 - Binding data

<!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 - example06</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;
        
        //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* 21;}) //20 + 1 for padding
          	.attr("y", function(d) {return h-(d.values/10);})
          	.attr("width", 20)
        		//.attr("height", function(d,i) {return d.values+"px";})
          	.attr("height", function(d,i) {return d.values / 10+"px";})
          	.style("fill",function(d,i) {
          		if (i > 1) {
            		return "#FF0000";
          		}
          		else {
            		return "#000000";
          		}
        		})
        	.style("display",function(d,i) {
                  if (i == 1) {
                    return "none";
                  }
                  else {
                    return "inline-block";
                  }});
      	}); //end of csv method
    </script>
  </body>
</html>

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