Edge creation
This interactive network visualization demonstrates edge creation through drag-and-drop. Users drag a node onto another node to create a new link, with a background circle lighting up to indicate proximity. The visualization uses circular nodes, making connection detection straightforward by measuring center-to-center distances. After new links are formed, community structure is recalculated using the jLouvain algorithm, with nodes colored by module and border styles indicating inter- or intra-community connections. The dataset represents relationships between healthcare entities like patient demographics, providers, and encounters, rendered as an SVG force-directed graph with D3 v3.
AI-generated descriptionGraph Example 7 for How to Create Effective Network Data Visualization
One method that seems intuitive for creating links between existing nodes is to allow the user to drag that node onto the node to which you want to make the connection.
This is particularly easy to do when the nodes are circular, since you just have to measure the distance from the center of each node to the center of other nodes. With squares or more irregular shapes, you'll need to settle for less accurate detection or using a bounding-box method.
After making new connections, the modularity is recalculated based on the new links.
The method used here, which creates a background circle that lights up when in the proximity of another node, was first developed by Scott Murray and I for Kindred Britain.
This example relies on the jLouvain library to calculate community structure.
forked from <a href='http://bl.ocks.org/mjamei/'>mjamei</a>'s block: <a href='http://bl.ocks.org/mjamei/a883a211d807828e95f6'>Networks - Graphs 7</a>