Skip to main content

Labelling nodes

Finally, let's label each node.

Visualization​

NetPanorama specification​


{
    "x": 50,

  "data": [
    {
      "name": "players",
      "format": {"type": "csv"},
      "url": "/data/tulip/chess.candidates.1948.1990.csv",
      "transform": [
          {"type": "addIndex", "as": "id"},
          {"type": "geocode", "locationField": "Birth Place" }
          ]
    },
    {
      "name": "games",
      "format": {"type": "csv"},
      "url": "/data/tulip/wcc.games.1948.1990.csv"
    }
  ],

  "networks": [
    {
      "name": "net",
      "nodes": "players",
      "links": "games",
      "directed": false,
      "source_node": [ "Name", "Player 1" ],
      "target_node": [ "Name",  "Player 2" ],

      "transform": [
          {"type": "filterNodes", "expression": "datum.Status == '2' "},
          {"type": "metric", "metric": "degree"},
          {"type": "cluster", "method": "louvain", "as": "cluster"}
      ]
    }
  ],



    "maps": [
    {
        "name": "my_map",
        "tiles": "Stamen_TerrainBackground",
        "zoomLevel": 3,
        "center": [51.5062, -0.1263]
    }
    ],

  "layouts": [
    {
      "name": "net-layout",
      "network": "net",

      "map": "my_map",
      "lat": {"field": "lat"},
      "lng": {"field": "lon"}
    }

  ],


  "scales": [
      {
          "name": "area",
          "type": "sqrt",
          "range": [40, 1000],
          "domain": [0, 6]
      },
      {
          "name": "color",
          "type": "ordinal",
          "domain": [0, 1, 2],
          "range": ["#279c87", "#c5df5f", "1f0265"]
      }
  ],

  "vis": [
    {
      "entries": "net.links",
      "layout": "net-layout",
      "mark": {
        "type": "linkpath",
        "start": "source",
        "end": "target"
      }
    },
    {
      "entries": "net.nodes",
      "layout": "net-layout",
      "mark": {
        "type": "circle",
        "area": {"field": "degree", "scale": "area"},
        "fill": {"field": "cluster", "scale": "color"},
        "tooltip": { "expression": "datum.Name + ' (degree ' + datum.degree + ')' " }
      }
    },

Add a text mark for each node.


    {
      "entries": "net.nodes",
      "layout": "net-layout",
      "mark": {
        "type": "text",
        "fontSize": 15,
        "dy": -25,
        "align": "center",
        "text": {"field": "Name"},
        "fill": "black"
      }
    },



    {
        "mark":{
             "type": "map",
            "map": "my_map"
        }
    }
  ]

}