Skip to main content

Force-directed Layout

Visualization​

Equivalent GLO specification​

Apply Force-Directed Algorithm
Display Links as Straight
Size Nodes Relatively by attribute
Display All Links
Hide x Axis
Hide y Axis
Set Target Generation 0
Set Source Generation 0

NetPanorama specification​

Compared to this GLO specification, the NetworkPanorma specification is longer, but it is doing more. It is specifying how the network data is loaded, and it is calculating the node degree, closeness and cluster, rather than loading these a s pre-computed node attributes. It also allows explicit control over the scales used to determine the node radius and color.


{

Load data


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



  "networks": [

Construct a network using these data arrays. For each entry in the "links" array, the "source" field is equal to the "id" field of the source node in the "nodes" array. Similarly, the "target" field is equal to the "id" field of the target node in the "nodes" array.


    {
      "name": "le-mis-network",
      "nodes": "nodes",
      "links": "links",
      "directed": true,
      "source_node": [ "id", "source" ],
      "target_node": [ "id",  "target" ],

Calculate the degree for each node, and cluster using the Louvain algorithm.


      "metrics": [
        { "metric": "degree" },
        { "metric": "closeness" }
      ],
      "transform": [
        {"type": "cluster", "method": "louvain"},
      ]


    }
  ],

compute a force-directed layout


  "layouts": [
    {
      "name": "le-mis-layout",
      "network": "le-mis-network",
      "type": "d3-force"
    }
  ],

Specify scales to map degree to node radius, and cluster id to color


  "scales": [
    {
      "name": "radius",
      "type": "linear",
      "range": [1, 500],
      "domain": [0, 40]
    },
   {
      "name": "color",
      "type": "linear",
      "scheme": "category20",
      "domain": [0, 20]
    },
  ],



  "vis": [

Visually represent each link as a straight line.


    {
      "entries": "le-mis-network.links",
      "layout": "le-mis-layout",
      "mark": {
        "type": "linkpath",
        "start": "source",
        "end": "target"
      }
    },

Visually represent each node as a circle...


    {
      "entries": "le-mis-network.nodes",
      "layout": "le-mis-layout",
      "mark": {
        "type": "circle",

...sized based on degree...


        "area": { "field": "degree", "scale": "radius" },

...and colored based on cluster id.


        "fill":   { "field": "louvain", "scale": "color" }


        "tooltip": {"field": "name"}
      }
    }
  ]
}