Skip to main content

Force-directed layout

Jacob Wood constructed a network representing which blogs are included in the blogroll of other blogs.

To start with, let's construct a simple node-link visualization using a force-directed layout.


{

Populate a data array by loading a CSV file


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

Construct a network using these data arrays.

For each entry in the "data.links" array, the "source" field is equal to the "id" field of the source node in the "data.nodes" array.

Similarly, the "target" field is equal to the "id" field of the target node in the "data.nodes" array. After creating the network, the degree is calculated for each node.


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

We compute a force-directed layout for the network.


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

Then render the nodes as circles (positioned using this layout), and links as lines.


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