Skip to main content

Circle Plot

Visualization​

Equivalent GLO specification​

Size Nodes by Constant
Position Nodes Along Plot Radius by {constant}
Evenly Distribute Nodes Radially by attribute
Display All Links
Display Links as Curved
Hide x Axis
Hide y Axis
Set Target Generation 0
Set Source Generation 0

NetPanorama specification​


{

Import data, construct network, calculate degree for each node and cluster


  "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"},
      ]

    }
  ],


Define an ordering over the nodes based on the degree


  "orderings": [
    {
      "name": "o",
      "data": "le-mis-network.nodes",
    "orderBy": { "field": "degree", "direction": "descending"  },
    "allowTies": false
    }
  ],

Define a circular layout of the nodes based on this ordering


  "layouts": [
    {
        "name": "le-mis-layout",
        "data": "le-mis-network.nodes",
        "pattern": "circle",
        "order": "o"
    }
  ],

Define a scale for node color


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

visual encoding


  "vis": [

Draw a curve for each link...


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

..and a circle for each node.


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