Skip to content

Instantly share code, notes, and snippets.

@thole

thole/data.json

Last active January 16, 2016 07:44
Show Gist options
  • Save thole/e7eb8278df17e1996917 to your computer and use it in GitHub Desktop.
Save thole/e7eb8278df17e1996917 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data.json
[
{
"name":"London",
"statistics":[
{"time": "2000-01-01T00:00:00-00:00",
"recats": 12
},
{"time": "2000-01-01T01:00:00-00:00",
"recats": 22
},
{"time": "2000-01-01T02:00:00-00:00",
"recats": 12
},
{"time": "2000-01-01T03:00:00-00:00",
"recats": 2
},
{"time": "2000-01-01T04:00:00-00:00",
"recats": 0
},
{"time": "2000-01-01T05:00:00-00:00",
"recats": 2
},
{"time": "2000-01-01T06:00:00-00:00",
"recats": 12
},
{"time": "2000-01-01T07:00:00-00:00",
"recats": 16
},
{"time": "2000-01-01T08:00:00-00:00",
"recats": 22
},
{"time": "2000-01-01T09:00:00-00:00",
"recats": 27
},
{"time": "2000-01-01T10:00:00-00:00",
"recats": 32
},
{"time": "2000-01-01T11:00:00-00:00",
"recats": 25
},
{"time": "2000-01-01T12:00:00-00:00",
"recats": 28
},
{"time": "2000-01-01T13:00:00-00:00",
"recats": 32
},
{"time": "2000-01-01T14:00:00-00:00",
"recats": 17
},
{"time": "2000-01-01T15:00:00-00:00",
"recats": 16
},
{"time": "2000-01-01T16:00:00-00:00",
"recats": 22
},
{"time": "2000-01-01T17:00:00-00:00",
"recats": 20
},
{"time": "2000-01-01T18:00:00-00:00",
"recats": 24
},
{"time": "2000-01-01T19:00:00-00:00",
"recats": 22
},
{"time": "2000-01-01T20:00:00-00:00",
"recats": 26
},
{"time": "2000-01-01T21:00:00-00:00",
"recats": 33
},
{"time": "2000-01-01T22:00:00-00:00",
"recats": 36
},
{"time": "2000-01-01T23:00:00-00:00",
"recats": 22
}
]
},
{
"name":"Hamburg",
"statistics":[
{"time": "2000-01-01T00:00:00-00:00",
"recats": 8
},
{"time": "2000-01-01T01:00:00-00:00",
"recats": 6
},
{"time": "2000-01-01T02:00:00-00:00",
"recats": 6
},
{"time": "2000-01-01T03:00:00-00:00",
"recats": 6
},
{"time": "2000-01-01T04:00:00-00:00",
"recats": 2
},
{"time": "2000-01-01T05:00:00-00:00",
"recats": 3
},
{"time": "2000-01-01T06:00:00-00:00",
"recats": 6
},
{"time": "2000-01-01T07:00:00-00:00",
"recats": 12
},
{"time": "2000-01-01T08:00:00-00:00",
"recats": 18
},
{"time": "2000-01-01T09:00:00-00:00",
"recats": 32
},
{"time": "2000-01-01T10:00:00-00:00",
"recats": 28
},
{"time": "2000-01-01T11:00:00-00:00",
"recats": 18
},
{"time": "2000-01-01T12:00:00-00:00",
"recats": 32
},
{"time": "2000-01-01T13:00:00-00:00",
"recats": 24
},
{"time": "2000-01-01T14:00:00-00:00",
"recats": 49
},
{"time": "2000-01-01T15:00:00-00:00",
"recats": 18
},
{"time": "2000-01-01T16:00:00-00:00",
"recats": 14
},
{"time": "2000-01-01T17:00:00-00:00",
"recats": 16
},
{"time": "2000-01-01T18:00:00-00:00",
"recats": 17
},
{"time": "2000-01-01T19:00:00-00:00",
"recats": 32
},
{"time": "2000-01-01T20:00:00-00:00",
"recats": 33
},
{"time": "2000-01-01T21:00:00-00:00",
"recats": 22
},
{"time": "2000-01-01T22:00:00-00:00",
"recats": 34
},
{"time": "2000-01-01T23:00:00-00:00",
"recats": 12
}
]
},
{
"name":"Berlin",
"statistics":[
{"time": "2000-01-01T00:00:00-00:00",
"recats": 7
},
{"time": "2000-01-01T01:00:00-00:00",
"recats": 4
},
{"time": "2000-01-01T02:00:00-00:00",
"recats": 12
},
{"time": "2000-01-01T03:00:00-00:00",
"recats": 3
},
{"time": "2000-01-01T04:00:00-00:00",
"recats": 3
},
{"time": "2000-01-01T05:00:00-00:00",
"recats": 4
},
{"time": "2000-01-01T06:00:00-00:00",
"recats": 12
},
{"time": "2000-01-01T07:00:00-00:00",
"recats": 10
},
{"time": "2000-01-01T08:00:00-00:00",
"recats": 23
},
{"time": "2000-01-01T09:00:00-00:00",
"recats": 22
},
{"time": "2000-01-01T10:00:00-00:00",
"recats": 29
},
{"time": "2000-01-01T11:00:00-00:00",
"recats": 18
},
{"time": "2000-01-01T12:00:00-00:00",
"recats": 37
},
{"time": "2000-01-01T13:00:00-00:00",
"recats": 28
},
{"time": "2000-01-01T14:00:00-00:00",
"recats": 22
},
{"time": "2000-01-01T15:00:00-00:00",
"recats": 30
},
{"time": "2000-01-01T16:00:00-00:00",
"recats": 12
},
{"time": "2000-01-01T17:00:00-00:00",
"recats": 15
},
{"time": "2000-01-01T18:00:00-00:00",
"recats": 10
},
{"time": "2000-01-01T19:00:00-00:00",
"recats": 10
},
{"time": "2000-01-01T20:00:00-00:00",
"recats": 42
},
{"time": "2000-01-01T21:00:00-00:00",
"recats": 48
},
{"time": "2000-01-01T22:00:00-00:00",
"recats": 12
},
{"time": "2000-01-01T23:00:00-00:00",
"recats": 8
}
]
},
{
"name":"Gesamt",
"statistics":[
{"time": "2000-01-01T00:00:00-00:00",
"recats": 27,
"incomings":60
},
{"time": "2000-01-01T01:00:00-00:00",
"recats": 32,
"incomings":50
},
{"time": "2000-01-01T02:00:00-00:00",
"recats": 30,
"incomings":40
},
{"time": "2000-01-01T03:00:00-00:00",
"recats": 11,
"incomings":30
},
{"time": "2000-01-01T04:00:00-00:00",
"recats": 5,
"incomings":20
},
{"time": "2000-01-01T05:00:00-00:00",
"recats": 9,
"incomings":30
},
{"time": "2000-01-01T06:00:00-00:00",
"recats": 30,
"incomings":60
},
{"time": "2000-01-01T07:00:00-00:00",
"recats": 38,
"incomings":80
},
{"time": "2000-01-01T08:00:00-00:00",
"recats": 63,
"incomings":120
},
{"time": "2000-01-01T09:00:00-00:00",
"recats": 81,
"incomings":150
},
{"time": "2000-01-01T10:00:00-00:00",
"recats": 89,
"incomings":160
},
{"time": "2000-01-01T11:00:00-00:00",
"recats": 61,
"incomings":140
},
{"time": "2000-01-01T12:00:00-00:00",
"recats": 97,
"incomings":150
},
{"time": "2000-01-01T13:00:00-00:00",
"recats": 84,
"incomings":170
},
{"time": "2000-01-01T14:00:00-00:00",
"recats": 88,
"incomings":150
},
{"time": "2000-01-01T15:00:00-00:00",
"recats": 64,
"incomings":100
},
{"time": "2000-01-01T16:00:00-00:00",
"recats": 48,
"incomings":80
},
{"time": "2000-01-01T17:00:00-00:00",
"recats": 51,
"incomings":80
},
{"time": "2000-01-01T18:00:00-00:00",
"recats": 51,
"incomings":120
},
{"time": "2000-01-01T19:00:00-00:00",
"recats": 64,
"incomings":140
},
{"time": "2000-01-01T20:00:00-00:00",
"recats": 101,
"incomings":160
},
{"time": "2000-01-01T21:00:00-00:00",
"recats": 103,
"incomings":160
},
{"time": "2000-01-01T22:00:00-00:00",
"recats": 82,
"incomings":120
},
{"time": "2000-01-01T23:00:00-00:00",
"recats": 42,
"incomings":80
}
]
}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<style>
.grid {
stroke: lightgrey;
stroke-width: 0.7;
opacity: 0.7;
}
text.recats {
font-size:7px;
fill:steelblue;
}
text.incomings {
font-size:7px;
fill:steelblue;
}
text.distribution {
font-size:8px;
}
path.incomings{
fill:steelblue;
stroke:steelblue;
}
path.recats{
fill:#fd9b27;
stroke:#fd9b27;
}
.axis path,
.axis line {
fill: none;
stroke: #636363;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke-width: 1.5px;
}
/* overlay */
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: none;
stroke: #636363;
stroke-width: 2.0px;
}
text {
font: 8px sans-serif;
}
</style>
</head>
<body>
<div id="reportBody">
<div align="center" id="recatReport" style="align:left"></div>
</div>
<script>
d3.json("data.json", function(data){
var summary = data.pop();
var min = d3.min(data,function(a){return d3.min(a.statistics,function(b,i){return b.recats})})
var max = d3.max(data,function(a){return d3.max(a.statistics,function(b,i){return b.recats})})
var sMax = d3.max(summary.statistics,function(b,i){return d3.max([b.recats,b.incomings])})
for (var i = 0; i < data.length; i++) {
insertDailyChart(data[i],[min,max]);
};
insertDailyChart(summary,[min,sMax],{h:180,w:780, mt:20,mr:5,mb:10,ml:25,element:d3.select("#recatReport"),withIncoming:true});
var details = new Array();
for(var i = 0;i < data.length; i++){
for(var j = 0;j < data[i].statistics.length; j++){
var obj = data[i].statistics[j];
var time = obj.time;
delete obj.time;
obj.name = data[i].name;
if(details[time.getTime()] == undefined){
details[time.getTime()] = [obj];
}
else{
var temp = details[time.getTime()];
temp.push(obj);
details[time.getTime()] = temp;
}
}
}
var newDetails = new Array()
for (var prop in details) {
if(!(prop > 0 )){continue;}
var obj = new Object();
obj.time = prop;
obj.statistics = details[prop];
newDetails.push(obj);
}
});
function insertDailyChart(data,scaler,config){
var color = d3.scale.category10();
var statistics = data.statistics;
statistics.forEach(function(d){
d.time = new Date(d.time)
})
if(config == undefined){
config = {h:100,w:780,mt:20,mr:5,mb:10,ml:25,element:d3.select("#recatReport"),withIncoming:false};
}
var svg = config.element.append("svg").attr("width",config.w).attr("height",config.h);
var bisectDate = d3.bisector(function(d) { return d.time; }).left;
var x = d3.time.scale()
.domain(d3.extent(statistics,function(d){return d.time;})).range([config.ml, config.w-(config.ml + config.mr)]);
var y = d3.scale.linear()
.domain(scaler).range([config.h - (config.mt + config.mb),config.mb]);
var yAxis = d3.svg.axis().tickValues(y.domain()).scale(y).orient("left");
var xAxis = d3.svg.axis().scale(x).tickFormat(d3.time.format("%H:%M")).orient("bottom");
svg.append("text")
.attr('x',config.ml)
.attr('y',config.mt -13)
.attr('class','text')
.style('font-weight','bold')
.text(data.name)
if(config.withIncoming){
svg.append("svg:path")
.data([statistics])
.attr("class","line incomings")
.style("fill","none")
.attr("d", d3.svg.line()
.x(function(d, i) { return x(d.time);})
.y(function(d, i) { return y(d.incomings);})
.interpolate("step-after")
);
}
svg.append("svg:path")
.data([statistics])
.attr("class","line recats")
.style("fill","none")
.attr("d", d3.svg.line()
.x(function(d, i) { return x(d.time);})
.y(function(d, i) { return y(d.recats);})
.interpolate("step-after")
);
var ticks = y.ticks(4);
svg.selectAll("path.xgrid").data(ticks).enter()
.append("line")
.attr("transform", "translate(" + (config.ml)+ ",0)")
.attr("class","grid")
.attr("x1", 0)
.attr("y1", function(d){return y(d);})
.attr("x2", config.w-(config.ml + config.mr))
.attr("y2", function(d){return y(d);})
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + (config.ml)+ ",0)")
.call(yAxis);
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (config.h-(config.mt + config.mb)) + ")")
.call(xAxis);
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("text")
.attr("x", 5)
.attr("dy", -5);
svg.append("rect")
.style("fill", "none")
.attr("class", "overlay")
.attr("width", config.w)
.attr("height", config.h)
.on("mouseover", function(){svg.selectAll("text.recats").style("display", null); })
.on("mouseout", function(){svg.selectAll("text.recats").style("display", "none"); })
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment