Skip to main content

Tweaking appearance

Now, let's try highlight the important nodes.

A reasonable measure of importance is the in-degree - the in-degree for a node is the number of other blogs linking to it.

Let's encode this as node size, and label any nodes with an in-degree that is more than 10.


{
  "data": [
    {
      "name": "data",
      "url": "/data/blogs/network.csv",
      "format": {"type": "csv"}
    }
  ],

  "networks": [
    {
      "name": "network",
      "links": "data",
      "directed": true,
      "source_node": [ "id", "source" ],
      "target_node": [ "id",  "target" ],

      "transform": [
        {"type": "metric", "metric": "degree"}
        {"type": "filterNodes", "expression": "datum.degree > 2 "}
        {"type": "cluster", "method": "louvain"},

We also compute the in-degree of each node


        {"type": "metric", "metric": "in-degree", "as": "indegree"}


      ]
    }
  ],

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

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

We define a scale to set the size of each node.


    {
        "name": "area",
        "type": "linear",
        "range": [0, 1000],
        "domain": [0, 32]
    }


  ],


  "vis": [
    {
      "entries": "network.links",
      "layout": "layout",
      "mark": {
        "type": "linkpath",
        "start": "source",
        "end": "target"
      }
    },
    {
      "entries": "network.nodes",
      "layout": "layout",
      "mark": {
        "type": "circle",

The size of each node is set by its indegree


        "area": {"field": "indegree", "scale": "area"},

Color each node based on the cluster number, using the color scale.


        "fill": {"field": "louvain", "scale": "color"},


        "tooltip": {"expression": "datum.id + ' (cluster ' + datum.louvain + ', indegree ' + datum.indegree + ')' "}
      }
    },

Label nodes with an indegree more than 10


    {
      "entries": "network.nodes",
      "layout": "layout",
      "mark": {
        "type": "text",
        "text": {"field": "id"},
        "align": "center",

        "fill": {
            "condition": {
                "test": "datum.indegree > 10",
                "value": "black"
            },
            "value": "none"
        }
      }
    }



  ]
}