Hierarchical Edge Bundling d3 v4 - simplest 2 node example

user_1342684 0
Viewed 4823

I would like to do the simplest Hierarchical Edge Bundling example I can, with two nodes. Once I fully understand how to make that work properly I should (hopefully) be able to dynamically construct the full visualization.

I saw Mike Bostock's D3 V4 example: https://bl.ocks.org/mbostock/7607999 and would like to use the same pattern. However, going through the JSON data it is a bit overwhelming. I was hoping with two nodes I could see how the visualization is constructed.

How would the JSON file look with just two nodes? I am trying to make the absolute easiest I can to try and learn how it works. Any help is appreciated.

I can't paste the JSON in here because it exceeds the maximum number of characters. For reference please check out: https://bl.ocks.org/mbostock/7607999#flare.jsonenter image description here

d3.js
2 Answers

To add further explanation to accepted answer for beginners.

Let's assume we have 3 nodes (3 publications) connected to each other.

const data = [
  {
    "name": "pub1",
    "imports": [ "pub3" ]
  },
  {
    "name": "pub2",
    "imports": [ "pub1" ]
  },
  {
    "name": "pub3",
    "imports": [ "pub2" ]
  }
];

It looks like same as accepted answer. https://bl.ocks.org/ckothari/raw/473320621a15a7ee1ed684bf3feb4255/.

To group further based on origin of publications, we can use . notation to represent hierarchal relationships.

Assume pub1 & pub2 belong to college abc. And pub3 belongs to college xyz.

Now the data looks like,

const data = [
  {
    "name": "abc.pub1",
    "imports": [ "xyz.pub3" ]
  },
  {
    "name": "abc.pub2",
    "imports": [ "abc.pub1" ]
  },
  {
    "name": "xyz.pub3",
    "imports": [ "abc.pub2" ]
  }
];

In the graph, pub1 & pub2 will lie close to each other as they belong to same pareent.

user_54013100
Related