improved block propagation histogram

models/history.js

@@ -1,4 +1,5 @@
 var _ = require('lodash');
+var d3 = require('d3');
 
 var MAX_HISTORY = 1008;
 var MAX_PEER_PROPAGATION = 36;
@@ -128,23 +129,34 @@ History.prototype.getBlockPropagation = function()
 {
 	var propagation = [];
 
-	var sorted = _(this._items)
-		.sortByOrder('height', false)
-		.slice(0, MAX_BLOCK_PROPAGATION)
-		.reverse()
-		.forEach(function(n, key)
+	_.forEach(this._items, function(n, key)
+	{
+		_.forEach(n.propagTimes, function(p, i)
 		{
-			_.forEach(n.propagTimes, function(p, i)
-			{
-				var prop = _.result(p, 'propagation', -1);
-
-				if(prop >= 0)
-					propagation.push(prop);
-			});
-		})
-		.value();
-
-	return propagation;
+			var prop = _.result(p, 'propagation', -1);
+
+			if(prop >= 0)
+				propagation.push(prop);
+		});
+	});
+
+	var x = d3.scale.linear()
+		.domain([0, 20000])
+		.interpolate(d3.interpolateRound);
+
+	var data = d3.layout.histogram()
+		.frequency(false)
+		.bins(x.ticks(MAX_BINS))
+		(propagation);
+
+	var freqCum = 0;
+	var histo = data.map(function(val) {
+		freqCum += val.length;
+		var cumPercent = (freqCum / Math.max(1, propagation.length));
+		return {x: val.x, dx: val.dx, y: val.y, frequency: val.length, cumulative: freqCum, cumpercent: cumPercent};
+	});
+
+	return histo;
 }
 
 History.prototype.history = function()

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "body-parser": "1.12.3",
+    "d3": "^3.5.5",
     "debug": "2.1.3",
     "express": "4.12.3",
     "geoip-lite": "1.1.6",

public/css/style.css

@@ -302,8 +302,7 @@ table td.peerPropagationChart {
 	padding: 5px 0;
 }
 
-.jqsfield .tooltip-arrow,
-.d3-tip .tooltip-arrow {
+.jqsfield .tooltip-arrow {
 	position: absolute;
 	bottom: 0;
 	left: 50%;
@@ -312,7 +311,8 @@ table td.peerPropagationChart {
 	border-top-color: #fff;
 }
 
-.datamaps-hoverover .tooltip-arrow {
+.datamaps-hoverover .tooltip-arrow,
+.d3-tip .tooltip-arrow {
 	position: absolute;
 	top: -5px;
 	left: 0px;
@@ -321,6 +321,11 @@ table td.peerPropagationChart {
 	border-bottom-color: #fff;
 }
 
+.d3-tip .tooltip-arrow {
+	top: 0px;
+	left: 50%;
+}
+
 .hoverinfo {
 	position: relative;
 	width: auto;

public/js/directives.js

@@ -121,18 +121,15 @@ angular.module('netStatsApp.directives', []).
 
 				var tip = d3.tip()
 					.attr('class', 'd3-tip')
-					.offset([-10, 0])
+					.offset([10, 0])
+					.direction('s')
 					.html(function(d) {
-						return '<div class="tooltip-arrow"></div><div class="tooltip-inner"><b>' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's</b>: ' + Math.round(d.y * 100) + "%" + "</div>";
+						return '<div class="tooltip-arrow"></div><div class="tooltip-inner"><b>' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's</b><div class="small">Percent: <b>' + Math.round(d.y * 100) + '%</b>' + '<br>Frequency: <b>' + d.frequency + '</b><br>Cumulative: <b>' + Math.floor(d.cumpercent*100) + '%</b></div></div>';
 					})
 
 				scope.init = function()
 				{
-					// Init data
-					var data = d3.layout.histogram()
-						.frequency(false)
-						.bins(x.ticks(TICKS))
-						(scope.data);
+					var data = scope.data;
 
 					// Adjust y axis
 					y.domain([0, d3.max(data, function(d) { return d.y; })]);
@@ -198,8 +195,6 @@ angular.module('netStatsApp.directives', []).
 						.attr("d", line(data));
 				}
 
-				scope.init();
-
 				scope.$watch('data', function() {
 					scope.init();
 				}, true);