Project information
- Category: Visualization
- Type: HTML + CSS + D3.js
- Client/Purpose: To experiment with different aspects of the javascript D3 library for graph visualization: adding labels, styling edges, scaling nodes, pinning nodes
- Project date: February, 2020
- Project URL: github
Exploring javascript D3 library with a Force Directed Graph
This was a simple but detailed experiment that included the following features: Adding labels to nodes, if the node is dragged, the label should follow. The edges should follow a style based on a field in the data array. The radius of each node was scaled based on the degree of the node (calculated), scale had an upper and lower limit.
Also, the degree of each node is represented by varying colors (gradient): the darker colors represent higher degree, the lighter, lower. Node pinning was implemented and represented with a color change and back to unpin with a double click.
I hope you already played a bit with those dancing nodes by now. :)