Skip to main content

Adjacency Matrix

Visualization​

Equivalent GLO specification​

Size Nodes by Constant
Evenly Distribute Nodes on y
Align Nodes Left
Clone Active Generation
Evenly Distribute Nodes on x
Align Nodes Bottom
Set Target Generation 1
Display Links as Circles
Display All Links

NetPanorama specification​


{
    "x": 100,
    "y": 100,

    "width": 1000,
    "height": 1000,

Import data and construct network, and cluster nodes.


  "data": [
    {
      "name": "nodes",
      "url": "/data/les-mis-nodes.json"
    },
    {
      "name": "links",
      "url": "/data/les-mis-links.json"
    }
  ],

  "networks": [
    {
      "name": "network",
      "nodes": "nodes",
      "links": "links",
      "directed": true,
      "source_node": [ "id", "source" ],
      "target_node": [ "id",  "target" ],
      "transform": [
        {"type": "cluster", "method": "louvain"}
      ],

    "addReverseLinks": true
    }
  ],

Create two color scales.


  "scales": [
    {
        "name": "color",
        "type": "linear",
        "scheme": "blues",
        "domain": [0, 10]
    },
    {
     "name": "clusterColor",
      "type": "linear",
      "scheme": "category20",
      "domain": [0, 20]
    }
  ],

Order nodes based on the cluster id.


 "orderings": [
    {
      "name": "o",
      "data": "network.nodes",
      "allowTies": false,
      "orderBy": [{"field": "louvain"}]
    }
  ],



Construct a table.


  "tables": [
    {
      "name": "adjacencyMatrix",
      "data": "network.links",
      "rowOrder": {
        "order": "o", "field": "source"
      },
      "colOrder": {
        "order": "o", "field": "target"
      }
    }

  ],

Draw contents of adjacency matrix,a nd label the rows and columns.


  "vis": [
    {
      "table": "adjacencyMatrix",

      "rowLabels": { "field": "source.name", "align": "right", "fill": {"field": "source.louvain", "scale": "clusterColor"}, "dx": -10  },
      "colLabels": { "field": "target.name", "dx": 20, "fill": {"field": "target.louvain", "scale": "clusterColor"}  },

      "mark": {
        "type": "square",
        "area": {"expression": "(bounds.width * bounds.height)"},
        "x": {"expression": "bounds.x"},
        "y": {"expression": "bounds.y + bounds.height/4"},

        "stroke": "white",

        "fill": {
          "condition": {
          "test": "datum.size < 1",
            "value": "white"
          },
          "scale": "color", "expression": "datum.size"
        },

       "tooltip": { "expression": "datum.key[0].name + ' <-> ' + datum.key[1].name"}
     }
   }
  ]
}

Changing the ordering​

Rather than ordering the rows and columns based on the cluster that each node belongs to, we can instead apply a seriation algorithm by changing the definition of the ordering:

 "orderings": [
    {
      "name": "o",
      "data": "network.nodes",
      "method": "optimal-leaf-order",
      "network": "network"
    }
  ],