Skip to main content

Labelled Force-directed Layout

Let's enhance this view by labelling nodes, and scaling each label based ont eh degree of the corresponding node.

Visualization​

Botvinnik, M.Smyslov, V.Reshevsky, S.Keres, P.Euwe, M.Bronstein, D.Boleslavsky, I.Najdorf, M.Kotov, A.Stahlberg, G.Lilienthal, A.Szabo, L.Flohr, S.Petrosian, T.Geller, E.Taimanov, M.Averbakh, Y.Gligoric, S.Spassky, B.Filip, M.Panno, O.Pilnik, H.Tal, M.Fischer, R.Olafsson, F.Benko, P.Korchnoi, V.Larsen, B.Ivkov, B.Portisch, L.Uhlmann, W.Huebner, R.Karpov, A.Mecking, H.Polugaevsky, L.Byrne, R.Hort, V.Adorjan, A.Kasparov, G.Ribli, Z.Torre, E.Beliavsky, A.Sokolov, A.Yusupov, A.Vaganian, R.Timman, J.Chernin, A.Short, N.Seirawan, Y.Nogueiras, J.Spraggett, K.Speelman, J.Hjartarson, J.Sax, G.Ehlvest, J.Salov, V.
textSize

NetPanorama specification​


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

  "data": [
    {
      "name": "players",
      "format": {"type": "csv"},
      "url": "/data/tulip/chess.candidates.1948.1990.csv",
      "transform": [{"type": "addIndex", "as": "id"}]
    },
    {
      "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" ],

Calculate the degree of each node.


    "transform": [
          {"type": "metric", "metric": "degree"}
      ]


    }
  ],


  "layouts": [
    {
      "name": "net-layout",
      "network": "net",
      "type": "d3-force"
    }
  ],

Define a scale mapping from degree to text size...


  "scales":[
      {
          "name": "textSize",
          "type": "linear",
          "domain": [0, 40],
          "range": [12, 40]
      }
  ],

  "vis": [
    {
      "entries": "net.links",
      "layout": "net-layout",
      "mark": {
        "type": "linkpath",
        "start": "source",
        "end": "target"
      }
    },
    {
      "entries": "net.nodes",
      "layout": "net-layout",
      "mark": {
        "type": "circle",
        "area": 70,
        "fill": "steelblue",
        "tooltip": {  "field": "Name" }
      }
    },

...and use this to scale a label for each node.


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


  ]

}


Note that rather than defining a scale for the text size, we could instead specify an equivalent expression:

"fontSize": {"expression": "1.1 * datum.degree"}