Skip to main content

Scatterplot

Posn. Nodes Relatively on x by attribute0
Posn. Nodes Relatively on y by attribute1
Show x Axis
Show y Axis
Hide Links
Size Nodes Relatively by attribute
Set Target Generation 0
Set Source Generation 0

{

  "x": 50,
  "y": 50,

Import data, construct network, and compute metrics.


  "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" },
        { "metric": "undirected-betweeness" }
      ]
    }
  ],

Define scales


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


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

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


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


  "vis": [

Draw a circle for each node...


    {
      "entries": "le-mis-network.nodes",
      "layout": "l",
      "drawAxes": true,
      "mark": {
        "type": "circle",
        "area": { "field": "degree", "scale": "radius" },
        "fill":   { "field": "degree", "scale": "color" },
        "tooltip": {"field": "name"},
      }
    }


  ]
}

Labelling points​

It's easy to label points by adding an extra entry to the vis section:

 {
      "entries": "le-mis-network.nodes",
      "mark": {
        "type": "text",
       "text": {"field": "name"},
         "fill": { "expression": "datum['undirected-betweeness'] > 70 ? 'black' : 'none'"},
         "dx": 10,
         "x":  {  "field": "undirected-betweeness", "scale": "x" },
         "y": {  "field": "degree", "scale": "y" }
      }
    }

Adding edges​

Edges can be added by adding:

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