xxxxxxxxxx<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 - example02</h1> <!--<p> previous paragraph</p>--> <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.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