Using the data at https://vda-lab.github.io/assets/stad_2910.json, create two linked plots: one with the network, and a scatterplot with community on the x-axis and the hadm_id on the y-axis. Your result should be similar to the visualisation below, and highlight points between the two plots on hover (check by hovering over the points).

vega_exercise 4

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "Assignment 4th graph",
  "padding": 0,
  "autosize": "none",
  "width": 800,
  "height": 400,

  "signals": [
    {"name": "cx", "update": "width / 1.4"},
    {"name": "cy", "update": "height / 2"},
    {
      "description": "State variable for active node dragged status.",
      "name": "dragged",
      "value": 0,
      "on": [
        {
          "events": "symbol:mouseout[!event.buttons], window:mouseup",
          "update": "0"
        },
        {"events": "symbol:mouseover", "update": "dragged || 1"},
        {
          "events": "[symbol:mousedown, window:mouseup] > window:mousemove!",
          "update": "2",
          "force": true
        }
      ]
    },
    {
      "description": "Graph node most recently interacted with.",
      "name": "dragged_node",
      "value": null,
      "on": [
        {
          "events": "symbol:mouseover",
          "update": "dragged === 1 ? item() : dragged_node"
        }
      ]
    },
    {
      "description": "Flag to restart Force simulation upon data changes.",
      "name": "restart",
      "value": false,
      "on": [{"events": {"signal": "dragged"}, "update": "dragged > 1"}]
    },
    {
      "description": "Any datapoint is activated",
      "name": "datapoint_is_activated", "value": false,
      "on": [
        {
          "events": "symbol:mouseover",
          "update": "true"
        },
        {
          "events": "symbol:mouseout",
          "update": "false"
        }
      ]
    },
    {
      "description": "Active datapoint",
      "name": "activated_datapoint",
      "value": null,
      "on": [
        {
          "events": "symbol:mouseover",
          "update": "item()"
        },
        {
          "events": "symbol:mouseout",
          "update": "null"
        }
      ]
    }
  ],

  "data": [
    {
      "name": "node-data",
      "url": "https://vda-lab.github.io/assets/stad_2910.json",
      "format": {"type": "json", "property": "nodes"}
    },
    {
      "name": "link-data",
      "url": "https://vda-lab.github.io/assets/stad_2910.json",
      "format": {"type": "json", "property": "links"}
    }
  ],
  
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "domain": {"data": "node-data", "field": "community"},
      "range": [100, 300]
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "node-data", "field": "hadm_id"},
      "range": [200, 50]
    },
    {
      "name": "colourScale",
      "type": "ordinal",
      "domain": {"data": "node-data", "field": "community"},
      "range": {"scheme": "category20"}
    }
  ],

  "marks": [
    {
      "type": "group",
      "encode": {
        "update": {
          "width": {"value": 200}, 
          "height": {"value": 200}
        }
      },
      "marks": [
        {
          "type": "symbol",
          "from": {"data": "node-data"},
          "encode": {
            "enter": {
              "x": {"scale": "xscale", "field": "community"},
              "y": {"scale": "yscale", "field": "hadm_id"},
              "tooltip": {"field": "hadm_id"}
            },
            "update": {
              "zindex": [
                {
                  "test": "datapoint_is_activated && datum === activated_datapoint.datum",
                  "value": -1
                }
              ],
              "fill": [
                {"test": "datapoint_is_activated && datum === activated_datapoint.datum", "value": "red"},
                {"scale": "colourScale", "field": "community"}
              ],
              "size": [
                {"test": "datapoint_is_activated && datum === activated_datapoint.datum", "value": 200},
                {"value": 50}
              ]
            }
          }
        }
      ],
      "axes": [
        {
          "scale": "xscale", 
          "orient": "bottom",
          "title": "Community"
        },
        {
          "scale": "yscale",
          "orient": "right",
          "offset": {"value": 120},
          "title": "hadm_id"
        }
      ]
    },

    {
      "type": "group",
      "encode": {
        "update": {
          "width": {"value": 200}, 
          "height": {"value": 200}
        }
      },
      "marks": [
        {
          "name": "nodes",
          "type": "symbol",
          "zindex": 1,

          "from": {"data": "node-data"},
          "on": [
            {
              "trigger": "dragged",
              "modify": "dragged_node",
              "values": "dragged === 1 ? {fx:dragged_node.x, fy:dragged_node.y} : {fx:x(), fy:y()}"},
            {
              "trigger": "!dragged",
              "modify": "dragged_node", "values": "{fx: null, fy: null}"
            }
          ],
          "encode": {
            "enter": {
              "fill": {"value": "grey"}, 
              "fillOpacity": {"value": 0.8}
            },
            "update": {
              "zindex": [
                {"test": "datapoint_is_activated && datum === activated_datapoint.datum", "value": -1}
              ],
              "size": [
                {"test": "datapoint_is_activated && datum === activated_datapoint.datum", "value": 200},
                {"value": 50}
              ],
              "cursor": {"value": "pointer"},
              "fill": [
                {"test": "datapoint_is_activated && datum === activated_datapoint.datum", "value": "red"},
                {"field": "community", "scale": "colourScale"}
              ]
            }
          },
          "transform": [
            {
              "type": "force",
              "iterations": 300,
              "velocityDecay": 0.4,
              "restart": {"signal": "restart"},
              "static": false,
              "forces": [
                {"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}},
                {"force": "collide", "radius": 2},
                {"force": "nbody", "strength": -1},
                {"force": "link", "links": "link-data", "distance": 5}
              ]
            }
          ]
        },
        {
          "type": "path",
          "from": {"data": "link-data"},
          "interactive": false,
          "encode": {
            "update": {
              "stroke": {"value": "lightgrey"}
            }
          },
          "transform": [
            {
              "type": "linkpath", "shape": "line",
              "sourceX": "datum.source.x", "sourceY": "datum.source.y",
              "targetX": "datum.target.x", "targetY": "datum.target.y"
            }
          ]
        }
      ]
    }
  ]
}