Joel Oughton-Estruch

I have been given a large amount of anomaly annotations that goes along with a set of internet trace data.

Here is a quick scatter plot I whipped up to get an overall idea amount and spread of data that I am dealing with.

Each of the ticks of the yaxis correspond to a snort id (see http://www.snortid.com). Time is along the xaxis and covers just under 2 minutes.

It is not appropriate here to display all of this data as event icons on top of the graph. This is only showing 2 minutes of data and the ability to zoom out to view days worth at a time is also required.

In order to effectively visualise this I am going to have to look into 1-dimensional clustering algorithms. This would allow for events which occur with small amounts of relative variation to be aggregated into one graph event summary.

Now, there are quite different cluster patterns for each of the snort ID’s so I am not sure how successful I am going to be.

A friend from university sent me a link to a article about ‘sparklines’. As the article title states, sparklines are intense, simple, word-sized graphics.

The article:
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR

This visualisation style fits in well with one of the projects I am working with that displays a 2D matrix of latencies between national servers. Currently it displays a single latency value (the mean RTT) inside each cell. It would be nice if a sparkline could be placed in each of the cells to give a summary of the last two hours of latency data.

The current system in place makes use of the Flot graphing library for producing graphs so I thought I would give sparklines a go using that.

It turned out to be rather straightforward. Here is the final result:

What I did:

1. Turned off the grid – gets rid of all borders, grid lines, ticks and tick labels.
2. Made a series with one data point equal to the last datapoint of the main series – a trick to colour the last point red.
3. Set the max x axis option to 1 unit more than the max datapoint – stops the red point from getting cut off.
4. Draw the graph with the options and series.

$(document).ready(function(){
var data = [ [0, 1], [1, 2], [2, 2], [3, 2], [4, 2], [5, 3], [6, 4], [7, 2], [8, 2], [9, 3], [10, 5], [11, 5], [12, 4] ];

  var options = {
    xaxis: {
      // extend graph to fit the last point
      max: data[data.length - 1][0] + 1
    },
    grid: {
      show: false
    }
  };

  // main series
  var series = [{
    data: data,
    color: '#000000',
    lines: {
      lineWidth: 0.8
    },
    shadowSize: 0
  }];

  // colour the last point red.
  series.push({
    data: [ data[data.length - 1] ],
    points: {
     show: true,
     radius: 1,
     fillColor: '#ff0000'
    },
    color: '#ff0000'
  });

  // draw the sparkline
  var plot = $.plot('#container', series, options);
});

Ridiculously Slow – being silly

for (var i = 0; i < 65000; i++) {
  document.body.appendTo(document.createElement("div"));
}

Fast – using a DocumentFragment

var fragment = document.createDocumentFragment();

for (var i = 0; i < 65000; i++) {
  fragment.appendChild(document.createElement("div"));
}

document.body.appendChild(fragment);

Probably obvious for most, but not for me on a Friday evening after working all day. 😛

I am in the process of developing a plugin for ‘Flot’ – the pure Javascript plotting library for jQuery.

The plugin needs to add functionality to Flot that allows clickable (or hoverable) events to be overlaid on the graph. An event is a certain occurrence that occurs at a specific time or range of time.

This is what I have so far:

The event pins and tooltip currently are divs overlaid on flot’s div after it has been drawn. JQuery UI has a nice bounce feature that lets you bounce the red pins as a one liner:

$('#someDiv').effect("bounce", { times:3 }, 300);

This bounces ‘someDiv’ 3 times in the period of 300ms. I came across an issue with firefox using this code. When the div finishes bouncing, the ‘mouseenter’ and ‘mouseover’ events are again triggered. This leads to the bounce animation being repeated if you place this code inside a mouse over event as I did. Interestingly enough, this does not happen in Chrome and Safari.

Here is the workaround I used for firefox.

div.hover(
   // mouseenter
   function () {
      // check if the mouse is not already over the event
      if ($(this).data("bouncing") == false ||
          $(this).data("bouncing") == undefined) {

          // check the div is not already bouncing
            $(this).effect("bounce", { times:3 }, 300);
            $(this).data("bouncing", true);
      }
    },
    // mouseleave
    function () {
      $(this).data("bouncing", false);
    }
);

Oh the joys of cross browser support.

This is working well so far. The problem is that I need some way of visualizing many more events on the same size graph. I am not sure how I will tackle this yet. I have set up a hierarchical structure to allow only events of specific importance to be shown at one point in time. I need to reduce the size of the red pins, or more likely, look at a different way of visualizing the events.