force graph overlaping links

Community Help
1

Hi,

I am new to d3 and observable, I tried creating this force graph based on an existing example published on the observable website Mobile Patent Suits / Masber / Observable

I reduce the CSV file for simplicity with the content below:

source target type
Microsoft Amazon licensing
Microsoft HTC licensing
Microsoft Amazon suit

My issue is that links that overlap (same source and target but different type) won’t show on the graph. For instance, in my example, I have |Microsoft|Amazon|suit| with the same source and target but then |Microsoft|Amazon|licensing| and one of them won’t be seen. This is an issue since I want to show the data for all links.

Any idea how can I tell d3 to show links with the same source and target but with different type?

thank you very much

1 Like
2

Your notebook appears to be private. Can you publish it as unlisted (i.e., link-share it)?

3

sorry I am new to observable.
I published the notebook as unlisted. here is the link Mobile Patent Suits / Masber / Observable

4

No worries! :slight_smile:

One strategy may be to vary the arc radius of each link based on the link’s type. Add a scale parameter to the linkArc cell:

function linkArc(d, scale = 1) {
  const r = scale * Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);
  return `
    M${d.source.x},${d.source.y}
    A${r},${r} 0 0,1 ${d.target.x},${d.target.y}
  `;
}

Then, in your chart cell, modify the simulation’s tick handler to adjust the radius based on the link’s type:

  const arcScale = {"licensing": 1.5, "suit": .1};
  simulation.on("tick", () => {
    link.attr("d", d => linkArc(d, arcScale[d.type]));
    node.attr("transform", d => `translate(${d.x},${d.y})`);
  });

which gives you:

image
image1082×634 39 KB

2 Likes