Skip to content

Instantly share code, notes, and snippets.

@jjelosua

jjelosua/README.md

Last active March 9, 2016 18:38
Show Gist options
  • Save jjelosua/905ebf419d8f2173559c to your computer and use it in GitHub Desktop.
Save jjelosua/905ebf419d8f2173559c to your computer and use it in GitHub Desktop.
Download ZIP
d3intro_ex06
Raw
README.md
Raw
index.html
<!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>
<!--<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";
}
})
.style("display",function(d,i) {
if (i == 1) {
return "none";
}
else {
return "inline-block";
}});
}); //end of csv method
</script>
</body>
</html>
Raw
tfl_passengers.csv
id period underground bus
2006/2007 - 1 2006/2007 73.1 156.5
2006/2007 - 2 2006/2007 75.6 158.9
2006/2007 - 3 2006/2007 74.3 158.4
2006/2007 - 4 2006/2007 77.4 161.5
2006/2007 - 5 2006/2007 73.7 153.5
2006/2007 - 6 2006/2007 74.1 153.2
2006/2007 - 7 2006/2007 81.1 165.1
2006/2007 - 8 2006/2007 83.4 166.5
2006/2007 - 9 2006/2007 84.6 166.5
2006/2007 - 10 2006/2007 71.1 138.9
2006/2007 - 11 2006/2007 78.5 160.5
2006/2007 - 12 2006/2007 81.2 163.0
2006/2007 - 13 2006/2007 82.8 167.7
2007/2008 - 1 2007/2008 77.7 164.5
2007/2008 - 2 2007/2008 79.6 168.7
2007/2008 - 3 2007/2008 80.0 166.4
2007/2008 - 4 2007/2008 84.0 167.5
2007/2008 - 5 2007/2008 81.0 163.1
2007/2008 - 6 2007/2008 78.0 163.3
2007/2008 - 7 2007/2008 85.2 174.7
2007/2008 - 8 2007/2008 87.5 173.9
2007/2008 - 9 2007/2008 88.7 174.9
2007/2008 - 10 2007/2008 73.9 143.0
2007/2008 - 11 2007/2008 82.3 169.4
2007/2008 - 12 2007/2008 85.3 172.7
2007/2008 - 13 2007/2008 88.1 173.5
2008/2009 - 1 2008/2009 79.8 162.1
2008/2009 - 2 2008/2009 83.8 175.1
2008/2009 - 3 2008/2009 83.1 172.9
2008/2009 - 4 2008/2009 86.3 175.8
2008/2009 - 5 2008/2009 82.4 170.5
2008/2009 - 6 2008/2009 80.8 167.4
2008/2009 - 7 2008/2009 86.5 182.3
2008/2009 - 8 2008/2009 88.8 179.6
2008/2009 - 9 2008/2009 88.7 180.2
2008/2009 - 10 2008/2009 73.2 147.9
2008/2009 - 11 2008/2009 81.2 169.5
2008/2009 - 12 2008/2009 82.5 166.3
2008/2009 - 13 2008/2009 95.4 196.1
2009/2010 - 1 2009/2010 91.3 195.2
2009/2010 - 2 2009/2010 80.6 174.7
2009/2010 - 3 2009/2010 78.1 184.7
2009/2010 - 4 2009/2010 82.0 177.5
2009/2010 - 5 2009/2010 77.5 160.4
2009/2010 - 6 2009/2010 77.6 173.5
2009/2010 - 7 2009/2010 84.5 187.1
2009/2010 - 8 2009/2010 86.8 179.3
2009/2010 - 9 2009/2010 88.4 184.1
2009/2010 - 10 2009/2010 69.5 138.0
2009/2010 - 11 2009/2010 83.3 173.6
2009/2010 - 12 2009/2010 86.6 174.1
2009/2010 - 13 2009/2010 78.5 162.7
2010/2011 - 1 2010/2011 90.5 188.4
2010/2011 - 2 2010/2011 84.5 180.4
2010/2011 - 3 2010/2011 84.3 176.9
2010/2011 - 4 2010/2011 86.5 182.7
2010/2011 - 5 2010/2011 82.9 161.7
2010/2011 - 6 2010/2011 80.9 175.4
2010/2011 - 7 2010/2011 88.7 189.8
2010/2011 - 8 2010/2011 90.3 181.8
2010/2011 - 9 2010/2011 90.6 179.9
2010/2011 - 10 2010/2011 72.5 140.8
2010/2011 - 11 2010/2011 84.4 178.8
2010/2011 - 12 2010/2011 87.8 178.6
2010/2011 - 13 2010/2011 83.5 173.9
2011/2012 - 1 2011/2012 91.2 183.8
2011/2012 - 2 2011/2012 87.8 186.1
2011/2012 - 3 2011/2012 88.9 181.7
2011/2012 - 4 2011/2012 92.5 186.7
2011/2012 - 5 2011/2012 85.5 161.1
2011/2012 - 6 2011/2012 85.3 173.9
2011/2012 - 7 2011/2012 93.1 193.1
2011/2012 - 8 2011/2012 95.8 185.2
2011/2012 - 9 2011/2012 97.1 189.4
2011/2012 - 10 2011/2012 79.3 150.7
2011/2012 - 11 2011/2012 89.8 180.1
2011/2012 - 12 2011/2012 91.5 178.0
2011/2012 - 13 2011/2012 92.7 189.2
2012/2013 - 1 2012/2013 88.7 171.8
2012/2013 - 2 2012/2013 92.6 189.2
2012/2013 - 3 2012/2013 89.7 176.5
2012/2013 - 4 2012/2013 96.9 189.9
2012/2013 - 5 2012/2013 103.0 167.1
2012/2013 - 6 2012/2013 94.0 177.0
2012/2013 - 7 2012/2013 98.2 194.5
2012/2013 - 8 2012/2013 100.4 185.2
2012/2013 - 9 2012/2013 101.9 188.1
2012/2013 - 10 2012/2013 79.0 152.3
2012/2013 - 11 2012/2013 91.7 178.8
2012/2013 - 12 2012/2013 96.7 180.9
2012/2013 - 13 2012/2013 96.6 187.2
2013/2014 - 1 2013/2014 92.1 173.4
2013/2014 - 2 2013/2014 97.2 191.1
2013/2014 - 3 2013/2014 95.9 185.6
2013/2014 - 4 2013/2014 100.8 192.7
2013/2014 - 5 2013/2014 94.1 167.8
2013/2014 - 6 2013/2014 91.0 175.8
2013/2014 - 7 2013/2014 101.4 196.9
2013/2014 - 8 2013/2014 103.7 187.9
2013/2014 - 9 2013/2014 106.3 195.0
2013/2014 - 10 2013/2014 83.9 156.4
2013/2014 - 11 2013/2014 96.8 188.0
2013/2014 - 12 2013/2014 94.3 186.8
2013/2014 - 13 2013/2014 107.0 207.8
2014/2015 - 1 2014/2015 88.8 165.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment