Tag: javascript

NetMapJs – A Scalable Network Mapping Tool

I recently posted my final report for my university honours project titled – ‘Improved Network Map Display’.

For part of the project, I implemented a JavaScript network mapping tool that I call ‘NetMapJs’.

I have made the source code of NetMapJs freely available on github.

The main features of NetMapJs are:

  • Support for subnetwork hierarchy
  • Separate layout algorithm support for different subnetworks
  • Rich display of bandwidth data in graph edges
  • Automatic poller to update performance data
  • Semantic zooming which adds more detail to the map as the user zooms in
  • Responsive zooming and panning to navigate through the network map
  • Support for adding overlays such as VLANs
  • Multi-nested interactive overview map to help maintain control when zooming

The following screenshot shows the KAREN network map loaded into NetMapJs. You can view this example running here.

 

NetMapJs makes use of the JIT library for a solid information visualisation framework and Arbor.js for the Force Directed (spring) layout type.

The tool is close to being ready for use in actual networks or a NMSs. Feel free to fork the repository and try it with your network.

Waikato University GPA calculator

Grade Point Average (GPA) Calculator:

I wanted to calculate my current grade point average (GPA) to see if I am on track to get a first class honours at Waikato University.

A quick google search did not show any results for a tool that exists publicly on the Waikato Uni’s website.

I decided to quickly code up one in javascript (mostly for procrastination reasons). I will make it available here for current and future students to benefit from. I did my best at getting the parameters right, but do not guarantee it is accurate or that I got these right! If you know it to be calculated any differently then let me know and I will update it.

The tool simply sums the products of each papers points by its grade value and then divides by the sum of all of the points (120 points in a standard full time course).

For Each Row
{ sum += row.points * grade value }

GPA = sum / TotalPoints

This is based off what I found on this Otago University’s page. It is adjusted to suit Waikato Uni’s grade system which gains an A+ for 85% opposed to Otago’s 90% (found here).

You can view the source code here.

And so no one tries to claim that their GPA has been calculated incorrectly:

Disclaimer: This tool will produce an estimate of a grade point average only. The parameters used to produce the GPA have not been verified and are not official. This tool is produced by me and is in no way affiliated with Waikato University. I take no responsibility for the results of using the output of this tool!

New Zealand Trade Visualisation

My latest University project was to create a visualisation of choice with another class member.

Stephen and I came across a complete set of data from New Zealand to all other trading countries. I must point out here that NZ does a comparatively good job to the rest of the world in terms of data availability. Some countries that will remain unnamed (*cough* Australia *cough*) provide their data in PDF form 🙁

StatsNZ Exports Datatable

This huge table was just screaming out to be visualised. We took inspiration from Minard’s effective French wine export map as well as from a global trade visual. Both of these visualisations use the line width to indicate the quantity of exports between countries. Lines start off thick and then thin out as it branches off into countries. Our goal became to take this static idea and present it in a dynamic way using HTML5 technologies.

Minard - French Wine Exports Map

By combining StatsNZ data and country locations collected using Google’s geolocation API, we were able to produce a JSON datastructure that could easily be adapted to support the visualisation of other countries. The following diagram breaks down the process:

532exports Application Flow

And the final product!

It can also be viewed live in my testing folder here: Export Visualisation

Special thanks to my group member Stephen and to StatsNZ, and the Google Maps API for their awesome data.

Update: The code is now available on github.

Force Directed Emails Visualisation Using arbor.js

I have recently been playing around with ways of visualising my sent emails for an assignment at university. I have over 6 years worth of sent mail sitting in Gmail, collecting electronic dust (and occasionally being dusted off and looked at).

I downloaded all of my sent mail from Gmail (over 3000 conversations), making  use of my university’s internet connection. I made use of thunderbird for this, as it stores emails in flat files on disk. I made a simple python script that takes this raw file and converts it into JSON.

import mailbox
import json

# path to you sent mail mbox
mb = mailbox.mbox('Sent Mail')

fout = file('sent.json', 'w')
items = []
fields = ['date', 'subject', 'to']

for i in range(len(mb)):
    obj = {}
    for item in mb.get_message(i).items():
        if item[0].lower() in fields:
            obj[item[0]] = item[1]
        mb.remove(i)
    items.append(obj)

json.dump(items, fout)
fout.close()

A nice javascript vis library called arbor makes it easy to take a graph and apply a force directed algorithm to it. It allows you to only worry about the visualisation side by separating the layout computation from the graphical display. Using this library and some basic javascript processing I was able to produce the following display.

Sent Emails Visualisation

I have obscured the recipient names for the sake of their privacy only (my own privacy has already been destroyed by the likes of such sites as Facebook – see: Facebook is an appalling spying machine).

The line widths between time periods and recipients relates to the number of emails sent to that person. Nodes can be dragged about and added in by dragging the sliders to alter the time range.

The most interesting part of this process was probably making a wordle based on all of the recipient names for all of the sent emails. The wordles changing from year to year showed the people that I was in the most communication with and perhaps most important in a given time in my life.

To leave you with an idea – someone needs to make a web app to anonymize wordles (ie replace words with random, but unique common words of the same length). A google search did not find anything meaningful.

** EDIT **
Lots of people have been asking for the code. I will provide the link to my github project but it will not include the data file. https://github.com/oughton/email-wordle/

Kd-tree in Javascript

I needed to get my head around how kd-trees work, so I coded up a simple implementation that just builds a tree. Naturally, add, delete, balancing etc methods would be required.

See wikipedia: kd-tree

    /*
     * Builds a kd-tree given an array of points
     */
    var kdtree = function(points, depth) {
        var axis, median, node = {};

        if (!points || points.length == 0) return;

        // alternate between the axis
        axis = depth % points[0].length;

        // sort point array
        points.sort((a, b) => a[axis] - b[axis]);

        median = Math.floor(points.length / 2);

        // build and return node
        node.location = points[median];
        node.left = kdtree(
            points.slice(0, median), depth + 1);
        node.right = kdtree(
            points.slice(median + 1), depth + 1);
        return node;
    }

Example usage would be:

var points = [ [2,3], [5,4], [4,7], [8,1], [7,2], [9,6] ];
kdtree(points, 0);