Multilayer network visualization

Get started

First, make sure you included appropriate .js and .css files inside the <script> tag of your web page:

<script src="multilayer-network-visualization.js"></script>
<link rel="stylesheet" type="text/css" href="multilayer-network-visualization.css" />

Unfortunately, in order for this multilayer network visualization to work properly, you also need to explicitly include all of its dependencies: jQuery, D3, Bootstrap and bootstrap-multiselect plugin. Luckily, with the exception of the bootstrap-multiselect plugin, there are CDN's available for all of the above. In the future versions these dependencies will be handled with the Angular's dependency injection. Read the detailed instructions here.

Next, include the following bellow somewhere inside your html. The initial-url attribute is a path to the .json file which contains network you want to visualize. As the default behavior of the <force-layout> is not to draw any links initially, use show-all attribute to draw them. Optionally you can also provide width and height attributes for the visualization, default values are 600x500.

<div ng-app="networkApp" ng-controller="networkCtrl">
    <force-layout initial-url="data/trade-network-onelayer.json" show-all="true" width="600" height="500"></force-layout>
</div>

Which should generate simple network visualization like this:

The format of the trade-network-onelayer.json file should be like this:

{"links":[
    {"source":1,"target":0,"weight":1539.858,
     "product":29,"year":1995,"direction":"export"},
    {"source":2,"target":0,"weight":41344.709,
     "product":29,"year":1995,"direction":"export"},
    {"source":3,"target":0,"weight":31923.761,
     "product":29,"year":1995,"direction":"export"},
    {"source":4,"target":0,"weight":4585.626,
     "product":29,"year":1995,"direction":"export"},
    {"source":5,"target":0,"weight":26440.3,
     "product":29,"year":1995,"direction":"export"},
    {"source":6,"target":0,"weight":2282.995,
     "product":29,"year":1995,"direction":"export"}],
"nodes":[
    {"label":"Australia","population":22683600},
    {"label":"Austria","population":8462446},
    {"label":"Brazil","population":198656019},
    {"label":"Canada","population":34880491},
    {"label":"Croatia","population":4669000},
    {"label":"Denmark","population":5590478},
    {"label":"Hungary","population":10328965},
    {"label":"Iceland","population":320137},
    {"label":"Israel","population":7907900}],
"product":[
    {"id":29,"label":"Food and live animals"},
    {"id":40,"label":"Beverages and tobacco"},
    {"id":72,"label":"Manufactured goods"},
    {"id":79,"label":"Iron and steel"},
    {"id":89,"label":"Road vehicles"},
    {"id":98,"label":"Total all products"}],
"year":[
    {"id":1995},
    {"id":1996},
    {"id":1997},
    {"id":1998}],
"direction":[
    {"id":"export"}]}

The structure should contain two mandatory arrays: links and nodes. Each link is a object with source and target indexes that correspond to the indexes of the nodes in the nodes array. It is not possible to use custom defined indexes in the nodes array. This is a limitation of the D3's force layout. All other attributes are optional, some of which are mapped to the visual elements in the following way:

1. weight (in the links array): thickness of the links
2. label (in the nodes array): label of a node
3. population (in the nodes array): size of a node

All other link attributes are considered to define aspects of the network. In order for the visualizaton to register them you have to provide them in separate arrays having mandatory id attribute and an optional label attribute. In the above case our aspects are product, year and direction. Each aspect could be separately selected with the <aspect-selector> directive that is explained here.