How to create d3.js force diagrams from excel tables
In Sankey diagrams from Excel and Creating d3.js Tree diagrams the input data for these d3.js visualizations was of a specific layout. We are now going to look at a more generalized data structure, in this example, to be used as input to a d3.js force directed graph. I’ll probably go back and change the others to use this standardized structure later too. Note that, as usual, none of this stuff really works with IE. d3.js uses svg, whose Wikipedia entry talks about various svg plugins for IE. I havent tried them – if you do then let us know on the forum. Better to stick to Chrome, Firefox or Safari which support svg as standard.
Why standardized data format
What is a force directed graph
Mike Bostok describes these in detail, but simply a force diagram consists of nodes and links which are positioned such that nodes with similar linkages are closer together than those that are not. In fact, unlike nodes repel each other (like similarly charged particles), and since these are dynamic, moving a node arounds disturbs all the others too.
We are going to use this example to demonstrate how to create force directed graphs straight out of Excel without any need to prepare the data in any special way. Here’s a snip of plot of Sean Connery Films and the connections between genre and director. This was a simple iTunes query using Rest to Excel library Here is the live interactive version.
And for the browser challenged, here’s a screenshot
You’ll see when you move these around in the interactive version everything else moves as well.
Any Excel table will do. For this example lets use the data returned from an iTunes database query on Sean Connery executed by Rest to Excel library. I use this for illustration – it can be any Excel table that you have generated in any way. Here’s a snip from the input data