Skip to main content

PivotGraph

Visualization​

Equivalent GLO specification​

Substrate Nodes on x by attribute0
Substrate Nodes on y by attribute1
Aggregate Nodes by attribute0 and attribute1
Size Nodes by Count
Show x Axis
Show y Axis
Display Links as Curved
Display All Links
Set Target Generation 1
Set Source Generation 1

NetPanorama specification​


{
  "x": 300,
  "y": 300,

Load data


  "data": [
    {
      "name": "nodes",
      "url": "/data/les-mis-nodes.csv",
      "format": {"type": "csv", "parse": { "id": "number" } }
    },
    {
      "name": "links",
      "url": "/data/les-mis-links.json"
    }
  ],

Construct network


  "networks": [
    {
      "name": "network",
      "nodes": "nodes",
      "links": "links",
      "directed": true,
      "source_node": [ "id", "source" ],
      "target_node": [ "id",  "target" ],
      "metrics": [
        { "metric": "degree" },
        { "metric": "closeness" }
      ],

      "transform": [

Perform Louvain clustering


        {"type": "cluster", "method": "louvain"},

Aggregate nodes based on sex and the cluster ids we just calculated, then aggregate edges


        {"type": "aggregateNodes", "fields": ["sex", "louvain"]},
        {"type": "aggregateEdges", "directed": false}


      ]
    }
  ],

Define scales for node color, x- and y- coordinates, and colors.


  "scales": [

    {"name": "nodeSize", "type": "linear", "domain": [0, 14], "range": [0, 2000]}

    {"name": "x", "type": "ordinal", "domain": ["M", "F"], "range": [0, 100]},
    {"name": "y", "type": "linear", "domain": [0, 10], "range": [0, 100]},

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

Define a layout that positions nodes based on their sex and cluster id.


  "layouts": [
       {
      "name": "pivotLayout",
      "data": "network.nodes",
      "pattern": "cartesian",
      "x": [{"scale": "x", "field": "key.sex"}],
      "y": [{"scale": "y", "field": "key.louvain"}]
    }
  ],


  "vis": [

Represent each link by a curve, with a width that depends on the number of original links that were aggregated into it.


    {
      "entries": "network.links",
      "layout": "pivotLayout",
      "mark": {
        "type": "linkpath",
        "start": "source",
        "end": "target",
        "strokeWidth": {"expression": "datum.data.length * 1"},
        "stroke": "black",
        "shape": "curveSymmetric"
       "tooltip": {"expression": "datum.data.length + ' links between ' + datum.source.key.sex + ' in cluster ' + datum.source.key.louvain + ' and ' + datum.target.key.sex + ' in cluster ' + datum.target.key.louvain "}
      }
    },

Represent each node by a circle, with area determined by the number of original nodes that were aggregated to form it, and colored based on the cluster id.


    {
      "entries": "network.nodes",
      "layout": "pivotLayout",
      "mark": {
        "type": "circle",
        "area":  {"field": "count", "scale": "nodeSize"},
        "fill":   { "field": "key.louvain", "scale": "color" },
        "tooltip": {"expression": " 'Sex: ' + datum.key.sex + '. Cluster: ' + datum.key.louvain + '. Num nodes: ' + datum.count "}
      }
    }
  ]
}