Skip to content

Instantly share code, notes, and snippets.

@kouphax

kouphax/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kouphax/4217ec4d26c141d7e368 to your computer and use it in GitHub Desktop.
Save kouphax/4217ec4d26c141d7e368 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Just James things

Raw
dji.csv
Date Count
13/04/2009 1
17/05/2009 1
24/08/2009 1
17/10/2009 1
23/11/2009 1
13/01/2010 1
26/07/2010 1
10/10/2010 1
12/10/2010 1
14/10/2010 2
16/10/2010 5
17/10/2010 3
19/10/2010 1
20/10/2010 1
21/10/2010 1
22/10/2010 1
24/10/2010 1
09/11/2010 1
10/11/2010 1
12/11/2010 1
18/11/2010 1
20/11/2010 1
07/01/2011 1
17/01/2011 1
24/01/2011 1
01/02/2011 1
09/02/2011 1
11/02/2011 1
24/02/2011 1
10/03/2011 1
13/03/2011 1
27/03/2011 1
02/04/2011 1
04/04/2011 1
14/04/2011 1
17/04/2011 1
19/04/2011 2
04/05/2011 1
12/05/2011 1
14/05/2011 1
15/05/2011 1
16/05/2011 1
17/05/2011 1
18/05/2011 5
21/05/2011 2
24/05/2011 1
29/05/2011 1
04/06/2011 1
07/06/2011 1
13/06/2011 1
14/06/2011 1
15/06/2011 1
16/06/2011 1
17/06/2011 1
18/06/2011 1
19/06/2011 1
20/06/2011 1
03/07/2011 1
04/07/2011 1
08/07/2011 1
16/07/2011 1
14/08/2011 1
15/08/2011 1
27/08/2011 1
30/08/2011 1
31/08/2011 1
12/09/2011 1
13/09/2011 1
18/09/2011 1
19/09/2011 1
24/09/2011 1
01/10/2011 1
07/10/2011 1
08/10/2011 2
17/10/2011 1
01/11/2011 1
03/11/2011 1
09/11/2011 1
16/11/2011 1
17/11/2011 1
25/11/2011 1
27/11/2011 1
03/12/2011 1
05/12/2011 2
13/12/2011 1
27/12/2011 1
30/12/2011 2
05/01/2012 1
26/01/2012 1
31/01/2012 1
09/02/2012 1
12/02/2012 1
06/03/2012 1
08/03/2012 1
12/03/2012 1
19/03/2012 1
20/03/2012 1
22/03/2012 2
26/03/2012 1
31/03/2012 1
01/04/2012 2
11/04/2012 1
15/04/2012 1
18/04/2012 2
27/04/2012 1
06/05/2012 1
24/05/2012 1
05/06/2012 3
15/06/2012 1
23/06/2012 1
01/07/2012 2
10/07/2012 2
13/07/2012 1
14/07/2012 1
16/07/2012 1
23/07/2012 1
03/08/2012 1
06/08/2012 1
19/08/2012 2
11/09/2012 1
04/10/2012 1
02/11/2012 1
05/11/2012 1
17/11/2012 1
12/12/2012 1
18/12/2012 1
28/12/2012 1
21/01/2013 1
30/03/2013 1
06/04/2013 1
16/04/2013 1
19/04/2013 1
27/04/2013 1
06/05/2013 1
26/05/2013 1
31/05/2013 1
16/07/2013 1
22/07/2013 1
27/07/2013 1
16/10/2013 1
08/11/2013 2
17/11/2013 1
11/12/2013 1
17/12/2013 1
02/01/2014 1
04/01/2014 1
05/01/2014 1
06/01/2014 1
18/01/2014 1
20/02/2014 1
02/03/2014 1
04/03/2014 1
31/03/2014 1
02/04/2014 1
28/04/2014 1
07/05/2014 1
14/05/2014 1
16/05/2014 1
18/05/2014 1
29/05/2014 1
31/05/2014 1
03/06/2014 1
18/06/2014 1
10/07/2014 1
20/07/2014 1
23/07/2014 1
24/08/2014 1
25/08/2014 1
04/10/2014 1
08/10/2014 1
25/11/2014 1
16/02/2015 1
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #000;
stroke-width: 2px;
}
.RdYlGn .v1{fill:rgb(208, 222, 170)}
.RdYlGn .v2{fill:rgb(190, 210, 141)}
.RdYlGn .v3{fill:rgb(153, 183, 111)}
.RdYlGn .v4{fill:rgb(122, 158, 88)}
.RdYlGn .v5{fill:rgb(73, 98, 59)}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 136,
cellSize = 17; // cell size
var day = d3.time.format("%w"),
week = d3.time.format("%U"),
percent = d3.format(".1%"),
format = d3.time.format("%d/%m/%Y");
var color = function(x) { return "v" + x; }
var svg = d3.select("body").selectAll("svg")
.data(d3.range(2009, 2016))
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g")
.attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")");
svg.append("text")
.attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)")
.style("text-anchor", "middle")
.text(function(d) { return d; });
var rect = svg.selectAll(".day")
.data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) { return week(d) * cellSize; })
.attr("y", function(d) { return day(d) * cellSize; })
.datum(format);
rect.append("title")
.text(function(d) { return d; });
svg.selectAll(".month")
.data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("path")
.attr("class", "month")
.attr("d", monthPath);
d3.csv("dji.csv", function(error, csv) {
var data = d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return d[0].Count; })
.map(csv);
rect.filter(function(d) { return d in data; })
.attr("class", function(d) { console.log(data[d], color(data[d]), data, d); return "day " + color(data[d]); })
.select("title")
.text(function(d) { return d + ": " + percent(data[d]); });
});
function monthPath(t0) {
var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0),
d0 = +day(t0), w0 = +week(t0),
d1 = +day(t1), w1 = +week(t1);
return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize
+ "H" + w0 * cellSize + "V" + 7 * cellSize
+ "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize
+ "H" + (w1 + 1) * cellSize + "V" + 0
+ "H" + (w0 + 1) * cellSize + "Z";
}
d3.select(self.frameElement).style("height", "2910px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment