d3intro_ex02

2015 Mozfest workshop - Intro to d3js

### Example02 - Getting data

Built with blockbuilder.org

forked from jjelosua's block: d3intro_ex00

forked from jjelosua's block: d3intro_ex01

forked from jjelosua's block: d3intro_ex02

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mozfest example</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>Mozfest: D3 intro - example02</h1>
    
    <script type="text/javascript">
      function rollupFunction(d) {
        var sum = d.reduce(function(prev,current){
          return  parseInt(+(current.bus) + prev);
        }, 0);
        return sum;
       }
      
      
    	//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) { return rollupFunction(d); })
        							.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.values+"M passengers have used the bus in the  "+d.key+" period";});
      	}); //end of csv method

//If we do this on the outside of the asynchronous function it may fail 
//because the data is not loaded yer

/*d3.select("body").selectAll("p")
        	.data(total)
        	.enter()
        	.append("p")
        	.text(function(d,i) {return d.values+"M passengers have used the bus in the  "+d.key+" period";});*/
    </script>
  </body>
</html>

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