Vega Edge bundling (directed) - vary thickness of each edge to show strength of connection

Question

I am looking to use an edge bundle visualisation as per:

https://vega.github.io/editor/#/examples/vega/edge-bundling

However, in this example, all the directed edges are of uniform thickness.

Instead, I need to generate edges of varying thickness to illustrate the strength of the relationship between nodes.

I envisaged passing that thickness into the model such that the edges defined by the JSON at https://github.com/vega/vega-datasets/blob/master/data/flare-dependencies.json

would be adjusted so an edge currently defined as:

  {
    "source": 190,
    "target": 4
  },

would instead be defined as say:

  {
    "source": 190,
    "target": 4,
    "edgeWeight": 23
  },

Is this possible? I did try experimenting by passing two simplified JSON datasets using value but couldn't figure out how to feed in that "edgeWeight" variable to the line definition in 'marks'.

Do you know how I might do that?

Regards,

Simon

Answer 1

I was provided an answer to this as follows:

First add a formula to append the size value from the flare.json dataset as a field 'strokeWidth' by writing this at line 90 in the example:

{
          "type": "formula",
          "expr":  datum.size/10000",
          "as": "strokeWidth"
        },

Next, in the marks, set the strokeWidth value for each edge in the edgebundle to the associated 'strokeWidth' in the column now created by writing this at what becomes line 176 after the above change:

"strokeWidth": {"field": "strokeWidth"}

After this, the diagram should render with edges of a thickness defined by that 'size' variable. Note that in this example, I had to scale the 'size' value in the original dataset by 10,000 to set the lines at a reasonable thickness.

In practice, I would scale the data prior to presenting it to Vega.