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 - example05</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);
//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";
}
});
}); //end of csv method
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js