Network Cluster Demo¶
This demo shows how to use ChartFactor to render network graphs. This graph represents software packages in npm (Node Package Manager). The size of a node is proportional to its number of connections. The more dependents, the more important the package is.
The directed links represent the dependency direction (package that depends -> dependency). You can highlight the full dependency tree by selecting a category on the Category list on the top left area. When ALL is selected, users can hover on nodes to see who immediately depends on the highlighted node. You can also run a force-directed physics simulation by clicking on the play button.
If you'd like to see the demo in full screen click here
Review the complete source code and copy/paste it to create your own.
1 | |
1 | |
1 | |
Data Collection¶
The package dependencies were collected directly from the official NPM page. For each package, all its dependencies and the dependencies of its dependencies were collected up to 6 levels of deep and all these dependencies were marked with a category number.