Skip to main content

Force-directed layout

John Alexis Guerra Gómez collected a dataset about tweets about the EuroVis 1029 conference, inlcuding a network of re-tweets.

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


{

Populate a data array by loading a JSON file



  "data": [
    {
      "name": "data",
      "url": "/data/eurovis-twitter/Eurovis2019Network.json"
    }
  ],

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",
      "nodes": "data.nodes",
      "links": "data.links",
      "directed": true,
      "source_node": [ "id", "source" ],
      "target_node": [ "id",  "target" ],

To reduce the size of the network, we calculate the degree for each node, and keep only the nodes with a degree of more than 250.



      "transform": [
        {"type": "metric", "metric": "degree"},
        {"type": "filterNodes", "expression": "datum.degree > 250 "}
      ]
    }
  ],

We compute a force-directed layout for the network.



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



  "vis": [

We represent each link by a path...


    {
      "entries": "network.links",
      "layout": "layout",
      "mark": {
        "type": "linkpath",
        "start": "source",
        "end": "target"
        "tooltip": {"field": "screen_name"}
      }
    },

...and represent each node as a circle.


    {
      "entries": "network.nodes",
      "layout": "layout",

      "mark": {
              "type": "circle",
              "area": 70,
              "fill": "steelblue",
              "stroke": "grey",
          }
    }


  ]
}