added heatmap

css/style.css

@@ -130,3 +130,8 @@ border-left-color: #111111;
     display: none;
   }
 }
+
+rect.bordered {
+  stroke: #D2D4BC;
+  stroke-width:1px;   
+}

status.html

@@ -1,7 +1,8 @@
 ---
 layout: default
 ---
-
+<script src="js/moment.js"></script>
+<script src="js/d3.min.js"></script>
 <script>
     var timeFormat = '%Y-%m-%d %H:%M:%S';
     function toHHMMSS (sec_num) {
@@ -45,6 +46,38 @@ layout: default
         }
       }
       
+      //DA FOO!!
+      //needs to be refactored! soon!
+      //smells like the shit this one guy took that forced british airways to fly back home.
+      var hourStart = moment.unix(data[0].value.lastchange)
+      var openTimeArrayIndex = 0;
+      var hourArray = [];
+      while(hourStart < moment()) {
+
+        if(hourArray[hourStart.weekday()] === undefined)
+            hourArray[hourStart.weekday()] = [];
+
+        if(hourArray[hourStart.weekday()][hourStart.hour()] === undefined)
+          hourArray[hourStart.weekday()][hourStart.hour()] = 0;
+
+        if(moment.unix(openTimeArray[openTimeArrayIndex][1]) < hourStart && moment.unix(openTimeArray[openTimeArrayIndex][2]) > hourStart) {    
+          hourArray[hourStart.weekday()][hourStart.hour()]++;
+        }
+
+        if(moment.unix(openTimeArray[openTimeArrayIndex][2]) < hourStart && openTimeArray.length > openTimeArrayIndex + 1)
+            openTimeArrayIndex++;
+
+        hourStart.add(1, 'hour');
+      }
+
+      hourObjectArray = [];
+      for(i=0;i<hourArray.length;i++) {
+          for(j=0;j<hourArray[i].length;j++) {
+            hourObjectArray[hourObjectArray.length] = {day:i,hour:j,value:hourArray[i][j]};
+          }
+      }
+      //end DA FOO!!
+      
       var timeComplete = Math.floor(Date.now() / 1000) - data[0].value.lastchange;
       
       percentOpen = Math.round((overallTrue * 100) / timeComplete);
@@ -79,6 +112,87 @@ layout: default
         else
           $( "#median_time_closed td:last" ).html(toHHMMSS((closedTimeArray[(closedTimeArray.length / 2) - 1][0] + closedTimeArray[(closedTimeArray.length / 2) + 1][0]) / 2) + "h");
       }
+      
+      //graph
+      var margin = { top: 50, right: 0, bottom: 100, left: 30 },
+      width = 960 - margin.left - margin.right,
+      height = 430 - margin.top - margin.bottom,
+      gridSize = Math.floor(width / 24),
+      legendElementWidth = gridSize*2,
+      buckets = 9,
+      colors = ["#D9534E","#D47551","#D09453","#CCB054","#C6C856","#A8C458","#8CC059","#72BC5A","#5CB85C"],
+      days = [ "Su","Mo", "Tu", "We", "Th", "Fr", "Sa"],
+      times = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
+
+      function showGraph (data) {
+            var colorScale = d3.scale.quantile()
+                .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
+                .range(colors);
+
+            var svg = d3.select("#chart").append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+            var dayLabels = svg.selectAll(".dayLabel")
+                .data(days)
+                .enter().append("text")
+                  .text(function (d) { return d; })
+                  .attr("x", 0)
+                  .attr("y", function (d, i) { return i * gridSize; })
+                  .style("text-anchor", "end")
+                  .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
+                  .attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });
+
+            var timeLabels = svg.selectAll(".timeLabel")
+                .data(times)
+                .enter().append("text")
+                  .text(function(d) { return d; })
+                  .attr("x", function(d, i) { return i * gridSize; })
+                  .attr("y", 0)
+                  .style("text-anchor", "middle")
+                  .attr("transform", "translate(" + gridSize / 2 + ", -6)")
+                  .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });
+
+            var heatMap = svg.selectAll(".hour")
+                .data(data)
+                .enter().append("rect")
+                .attr("x", function(d) { return ((d.hour - 1) * gridSize) + 40; })
+                .attr("y", function(d) { return ((d.day - 1) * gridSize) + 40; })
+                .attr("rx", 4)
+                .attr("ry", 4)
+                .attr("class", "hour bordered")
+                .attr("width", gridSize)
+                .attr("height", gridSize)
+                .style("fill", colors[0]);
+
+            heatMap.transition().duration(1000)
+                .style("fill", function(d) { return colorScale(d.value); });
+
+            heatMap.append("title").text(function(d) { return d.value; });
+
+            var legend = svg.selectAll(".legend")
+                .data([0].concat(colorScale.quantiles()), function(d) { return d; })
+                .enter().append("g")
+                .attr("class", "legend");
+
+            legend.append("rect")
+              .attr("x", function(d, i) { return legendElementWidth * i; })
+              .attr("y", height)
+              .attr("width", legendElementWidth)
+              .attr("height", gridSize / 2)
+              .style("fill", function(d, i) { return colors[i]; });
+
+            legend.append("text")
+              .attr("class", "mono")
+              .text(function(d) { return "≥ " + Math.round(d); })
+              .attr("x", function(d, i) { return legendElementWidth * i; })
+              .attr("y", height + gridSize);
+        }
+
+        showGraph(hourObjectArray);
+        //end graph
     });
 </script>
 <script>
@@ -224,4 +338,16 @@ layout: default
       </table>
     </div>
   </div>
+  <div class="row">
+    <div class="alert alert-warning" role="alert">
+      <b>
+        Menschen treffen oder Kontakt vermeiden?
+      </b>
+      Hier Zeiten zu denen wahrscheinlich Menschen dasein werden...
+    </div>
+    <div class="col-md-10 col-md-offset-1">
+      <div id="chart">
+      </div>
+    </div>
+  </div>
 </div>