d3intro_ex03

Intro d3js

### Example03 - 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 - example03</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);
      	console.log(total);

//bind data with DOM elements inside the csv anonymous function
        d3.select("body").selectAll("p")
          .data(total)
          .enter()
          .append("p")
          .text(function(d,i) {return "d.key: " + d.key + " d.values: "+ d.values+ " index: " + i + " this: " + this;});
      	}); //end of csv method
    </script>
  </body>
</html>

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