[tor-dev] Better relay uptime visualisation

[David Fifield]

On Mon, Dec 07, 2015 at 02:51:23PM -0500, Philipp Winter wrote:
> I spent some time improving the existing relay uptime visualisation [0].
> Inspired by a research paper [1], the new algorithm uses single-linkage
> clustering with Pearson's correlation coefficient as distance function.
> The idea is that relays are grouped next to each other if their uptime
> (basically a binary sequence) is highly correlated.  Check out the
> following gallery.  It contains monthly relay uptime images, dating back
> to 2007:
> <https://nymity.ch/sybilhunting/uptime-visualisation/>

How about just taking the XOR of two sequences as the distance?

It would be interesting to know if there are any near-perfect
anticorrelations; i.e., one relay starts when another stops.

> Another practical problem is that it's cumbersome to learn the relay
> fingerprint of a given column.  I'm looking into JavaScript/HTML tricks
> that can show text when you hover over a region in the image.  Perhaps
> somebody knows more?

One way is to set an onmousemove handler that inserts text into a
preexisting element. For example (untested):

<div id=output>
</div>

var OUTPUT_ELEM = document.getElementById("output");
/* Get an event's coordinates relative to a given element. */
function elem_coords(event, elem) {
	var rect = elem.getBoundingClientRect();
	/* http://stackoverflow.com/a/872537 */
	if (typeof pageXOffset !== "undefined") {
		scrollLeft = pageXOffset;
		scrollTop = pageYOffset;
	} else if (document.documentElement !== undefined && document.documentElement.clientHeight !== undefined) {
		scrollLeft = document.documentElement.scrollLeft;
		scrollTop = document.documentElement.scrollTop;
	} else {
		scrollLeft = document.body.scrollLeft;
		scrollTop = document.body.scrollTop;
	}
	var x = event.pageX - (scrollLeft + rect.left);
	var y = event.pageY - (scrollTop + rect.top);
	return { x: x, y: y };
}
function onmousemove_callback(event) {
	var c = elem_coords(event, img_element);
	OUTPUT_ELEM.innerText = get_text_for_coordinates(c.x, c.y);
}