The Aid Data used in this page is available as CSV. It has been imported to visualise how the data is getting transformed as we work in D3. Before seeing the transformation the data undergoes, lets look at the Force directed graph
It is surprising to see how close knitted the nations are. Below we see only the connection of top 10 aid donors and 20 aid recievers. That alone has resulted in 191 connections that you are seeing below. How the data looks under the vertices and the edges of the network graph? That is the subject of discussion
Data is having the following structure after aggregating with d3.rollups() and d3.hierarchy. But before applying any Layout functions
Notice the additional x0,x1,y0,y1 keys that have attached. These are values that are used for building the treemap layout using the plain rectangles.
Graphs can be directed or un-directed. We are discussing the graph or network that is created by directing the force between source and targets. The data configuration needed for the above graph is as follows
Nodes of the graph are positioned after the d3.simulation() completes the calculation. There are multiple forces specified on the nodes. The nodes that start as simple array takes additional keys as shown below.
Looking at the data before it goes through the any of the JS functions or D3's layouts provides the starting point for the next action that is required. If the starting data configuration is not correct, then it can be corrected and further steps can be taken. Some layout transformations are dynamic to an extent that, stringifying it will provide only the starting data configuration. Deeper understanding is must... Hope this discussion paves the way.