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.

Network Bandwidth Visualisation for Graphs

Part of my honours project consists of visualising network bandwidth utilisation on a node/edge graph.

Basic information visualisation techniques can be used to make simple, effective and communicative network edge graphics. Current network packages that produce such graphs, from what I have seen, do not attempt to communicate very much information through graph edges.

Lets go through a quick process of making an effective edge.

Say that we have two nodes A and B.Bandwidth 0

A simple way of showing that both A and B are connected to each other in each direction would be a double sided arrow between the two.

Bandwidth 1

Lets change the arrows so that they face towards each other and converge in the middle of the two connected nodes.

Bandwidth 2

So far this just indicates a bidirectional link between the two network devices A and B. Let us use the basic idea that wired networks are essentially just a series of tubes.

Connect both A and B with an empty pipe and a divider in the middle. Then draw arrow heads along the respective pipe sections to show the percentage of the total bandwidth that is currently in use.

This is using the length of the line to indicate the percentage utilisation which is a quantitative variable. The use of length is effective for human recognition of quantitative values. The length clearly shows that about half of the A->B link’s bandwidth is currently in use.

Bandwidth 4

We are not making use of the vertical dimension. Make the height adjust according to the total bandwidth available on a link. For example 100Mbit, 1Gbit, 10Gbit etc.

Again, line thickness is effective for displaying quantitative values. It is obvious that the link A->B has about twice the bandwidth as B->A.

Bandwidth 5

You may have noticed that up to this point I have been avoiding the use of colour for bandwidth quantities. Colour is actually one of the most least useful means for visualising quantitative variables. However it is effective for categorical variables.

Lets say for example that green is good, yellow is intermediate and red is a bad network state. These categories are shown well by adding the respective colours to arrows within the pipe sections. Alternatively the pipe section colours could indicate these network states.

Bandwidth 6

Putting all of this together, we get as our final product:

Bandwidth 8

Network Map Display Project

To be awarded my degree with honours I have to complete an honours project which is worth the majority of my years work. The way it works is, lecturers write blurbs about projects that they would like to supervise and then the students browse through and pick the one that they like.

I have settled upon a project titled “Improved Network Map Display”. It is going to involve research around the area of network topology data consolidation and visualisation.

I have had a (short) look around the web and as far as I can tell, there has not been anything like this done in its entirety. Visualisations exist (most of which are static) that allow certain individual levels of network topology to be visualised. The purpose of this project is to improve upon these levels and to allow for seamless transitions between them as you zoom in and out. This will require interviews with various different network engineers and users, and also a well thought out topology schema that will fit the purpose of complete consolidation.

Here is the ‘Karen’ weathermap that shows the data traffic flows over the network. See the live version:

This is a good example of how an autonomous system view might look.

The ability to zoom in here, assumes that the autonomous systems are willing to share network topology information, which I don’t think is a realistic assumption to make.

ADSL Cap Delay

Up until a few months ago, we only had 20GB bandwidth per month at my flat. This meant that we could not make heavy use of the internet during the duration of the month.

We are on a plan that caps the internet speed down 64kbit/s when you exceed the monthly limit. However there seems to be an approximately 24 hour delay between going over the bandwidth limit, and getting capped.

Lets do a little math.

  • time = 24 hours = 24 x 60 x 60 seconds
  • internet speed = 800 kb/s

24 x 60 x 60 x 800 = 69120000 kb = 65.9GB

Thats right, I can potentially more than tripple my bandwidth allowance by saving up all the large downloads until the last day of the billing month.

I tested out this theory a couple months ago and managed to download 36GB in one day. The only reason this stopped was because I ran out of things to download and I was not at home at the time 🙂

ADSL usage screenshot