User login

William Lam's blog




This week I worked on a new star layout algorithm that deals with the "outer" edges so that the "inner" edges will not overlap with the outer ones. The main idea is to rotate all of the inner nodes until it finds a solution where it does not overlap. It this solution fails, it will run another method which will reduce the arc between each nodes in the circular group.

The only problem with this algorithm now is that it does take a while to compute (approximately 4 seconds upon page loading). I also spent about a day documenting all the code I've been working on.

I've attached some images showing the star layout before and after.




This week I continued to fix bugs that were occurring on the weathermap. One particular annoying bug that occurred was the zooming inverse bug that flip all edges and nodes when zoomed out too fast. Turn out this was to do with the scaling going negative when zooming in/out too quickly.

I had to make minor changes to the JIT library (visualisation library) to fix it. I also made some minor changes to the weathermap such as the change of cursor styles, expandable height for graph view, and having a useful message when there is no graphs added.




This week I've been debugging a lot. Found out that some of the edges have had their data switched around. E.g. node A to node B had node B to node A's data. This was a very subtle bug as only some of the edges have this.

After a few days of debugging, it turns out that the arc tangent passed in to draw the edge was sometimes 180 degrees off because the method used (Math.atan) only returns a value between -pi/2 and pi/2. This cause the edges to 'flip' around (edge drawn reversely) which is the reason why some of the data was switched around.

I've also been experimenting different ideas with the 'hidden edge problem'. Currently, I've just hard-coded in some edges for the top level only, so that the edges are not hidden. I'll attempt to find a better solution later on.




This week I spent my time changing the way the traffic graphs are viewed. Previously, to view the graphs, an edge would have to be clicked and that will take you to a different page which shows the graph. Now I've changed it so that when an edge is clicked on, a graph will pop up as a widget without going to a new page.

The new graph widget can be removed, or closed so it can be re-opened later. I also started to debug some of my server-sided scripts as there were some minor bugs in them.




This week I modified the colour scheme of the weathermap so that it has the KAREN colours. I also added some logos and the traffic load legend on the weathermap. When I changed colour scheme, I noticed that most of the edges on the KAREN weathermap had very small ultilisation bands (since the network utilisation is very low) and therefore the weathermap looked very dull (i.e not much colours).

After talking to Richard and Mark Apperley, we decided to re-design the traffic utilisation visualisation a bit so that the edges have 5 bars. Each different level of bars will have a different colour associated with it along with a unique utilisation indicator. For example, 1 bar will indicate the utilisation from 0% - 1% for a link and the bar will be blue; 2 bars will indicate 1% - 10% and the colours of both bars will be green, and etc.

This was a good suggestion since we cannot really make fine distinctions between say 6% and 7% using the original linear traffic utilisation visualisation method and it also added some colours to the weathermap.

The second part of the week involved me adding features/functions that I was missing on my graphs such as y-label, display options, ability to choose max/average, and etc. I also got Brendon to hook up my graphs with live data; so now clicking on any edge will take you to some graphs.

There are still some minor bugs (mostly my php script that is returning the data) with the graphs which will need some work after the break.

Weathermap link:




This week I continued working on the interactive traffic graphs for the weather map. I managed to make it so that when an edge is clicked, it'll take you to a separate page so that the traffic graphs can be viewed.

Currently however; there are only traffic graphs for the link from Hamilton to the University of Waikato because the graph data is not hooked up with live data (the Hamilton -> UOW data is from the new RRD files that Brendon fetched me this week).

I also re-worked some of my scripts that are being used to get the utilisation data so that it will work nicely with the scripts that will be used to fetch live data for the graphs. I'm almost finished with the scripts that will be used to fetch live data for the traffic graphs, and hope that it'll be up next week.




This week I managed to create PHP scripts to fetch data from RRD files to generate the appropriate time series plots for the graphs I'm producing. I also spent a good amount of time dealing with the way the graph is zoomed and panned (e.g. the change of the time labels, loading new "parts" of the graph when zoomed or panned, and etc).

I used aggregation for the plots when the user zooms out since there will be too many plots if this is not done, making the graphs slow and almost impossible to interact. Aggregating the plots proved to be quite hard and some more work needs to be done next week.

I also managed to hook up NetMapJs with live karen data. The live weather map looks good in most parts, though there are some missing edges on the top level. For example, an edge is missing from the Sydney to Auckland (when viewed from top-level). Once zoomed in, the edge appears.

The reason for this is because Sydney is connected to another group node (AKL_international) that is a parent to Auckland.

I still need to tidy up some code and slightly optimise the way the edges are updated (needs quite a bit of refactoring).

Karen Weather Map (NetMapJs version)

Note: For the Karen network, utilisation is very low, so most of the edges will show a very smallish length of green. Also, the current colour scheme used is not the same as the current Karen weather map.




This week I spent most of my time completing the php scripts that will be used to generate the necessary JSON/php configuration files for the NetMapJs version of the Karen Weather Map. The data in the configuration files that defines the map is based on the Karen topology data stored in a database, which is used to generate the current Karen Weather Map configuration files. This proved to be a little more challenging than expected since some of the information in the current karen weather map is hard-coded.

I also played around with FLOT (Javascript library that works in collaboration with JQuery to produce graphs), since I will be working on adding a graphing feature to NetMapJs. The idea is when a link is hovered (or clicked, double clicked..etc), a graph will be produced to show the maximum throughput between the two link just like the current weather map.




I continued working on the php scripts I started last week after getting Brendon to install the missing RRD-php module. I then spent a good amount of time getting NetMapJs to update based on the data in the example RRD file I received last week.

This involved me creating a new JSON structure which differs to the one used to define the map (as it only contain values that is being updated. e.g. traffic_out, bandwidth), creating a php script which defines the configuration of the node data, and modifying some JavaScript in NetMapJs to deal with the new JSON file.




Started work by reading and attempting to understand the NetMapJs library source code (created by Joel). This proved to be a challenge as there were bits and pieces of javascript syntax that I have not encountered before. I then played around with the JSON structure (that NetMapJs takes in) to create my own nodes and to better understand the way NetMapJs works.

I finished off the week by mucking around with some RRD files to get an understanding of the RRDTool. I also created some php scripts to fetch data from the aforementioned files, but it turns out the RRD-php extension support was not installed.