Skip to main content

Semantic Substrates

Visualization​

Equivalent GLO specification​

Substrate Nodes on y by attribute1
Evenly Distribute Nodes on x Within Substrates
Display Selected Links
Size Nodes by Constant
Display Links as Curved
Display All Links
Hide x Axis
Hide y Axis
Set Target Generation 0
Set Source Generation 0

NetPanorama specification​


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

Import data, construct network, and compute degree and cluster id for each node.


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

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



  "scales": [

Create a scale that maps from cluster id to color


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

Create a scale that maps from node degree to x-coordinate...


    {
      "name": "x",
      "type": "linear",
      "range": [0, 1000],
      "domain": [0, 20]
    },

...and a scale that maps from cluster id to y-coordinate.


    {
      "name": "y",
      "type": "linear",
      "range": [1000, 0],
      "domain": [0, 40]
    }
  ],

Define a Cartesian layout that positions nodes based on the x- and y- scales.


  "layouts": [
    {
      "name": "l",
      "data": "le-mis-network.nodes",
      "pattern": "cartesian",
      "x": [{  "field": "degree", "scale": "x" }],
      "y": [{  "field": "louvain", "scale": "y" }]
    }
  ],


  "vis": [

Represent links by curves...


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

...and represent nodes by circles, colord by cluster id.


    {
      "entries": "le-mis-network.nodes",
      "layout": "l",
      "mark": {
        "type": "circle",
        "area": 100,
        "fill": { "field": "louvain", "scale": "color" },
        "tooltip": {"field": "name"}
      }
    }
  ]
}