Skip to main content

Adding interactivity

Now, let's add some interactivity.

When the user mouses-over a node, highlight the links to and from that node.


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

We add two parameters


  "parameters": [

This selection parameter records the currently selected node.


    {
      "name": "selected_node",
      "action": "replace",
      "network": "network",
      "type": "selection"
      },

This selection parameter records the links connected to from the selected node.


      {
        "name": "outlinks",
        "source": "selected_node",
        "network": "network", // temporary hack
        "transform": [
          {
             "type": "connectedEdges"
          }
        ]
      }


  ],


  "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"},
        {"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]
    },
    {
        "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",
        "area": {"field": "indegree", "scale": "area"},
        "fill": {"field": "louvain", "scale": "color"},
        "tooltip": {"expression": "datum.id + ' (cluster ' + datum.louvain + ', indegree ' + datum.indegree + ')' "}
      },

Mousing-over the node will update the value of the selected_node selection


      "actions": [
        {
          "interaction": "select",
          "using": "cursor",
          "event": "mouseover",
          "action": "replace",
	      "selection": "selected_node"
        }
      ]


    },


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

The labels for nodes with in-degree <= 10 will have fill set to "none", so they won't intercept mouseover events

for node circles underneath them.


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




    },

Draw a red line on top of the visualization for currently selected links.


    {
      "entries": "network.links",
      "layout": "layout",
      "ifInSelection": "outlinks.links",
      "mark": {
        "type": "linkpath",
        "start": "source",
        "end": "target",
        "stroke": "red",
        "endMarker": {"shape": "triangle", "stepBack": 10}
      }
    }



  ]
}