Network Annotation with Collision Detection
This example shows a network graph of characters from Les Miserables, where labels for nodes are positioned using a custom force simulation with bounding-box collision detection. The `d3-annotation` library is used to place text labels for non-trivial characters, while a second force simulation applies `bboxCollide` to push labels apart so they don't overlap. The network is rendered as an SVG with nodes and links, and the labels are filtered to include only major characters, then automatically repositioned around the graph.
AI-generated descriptionUsing collision detection with network visualization labels
This demonstrates how to use d3-annotation() with bboxCollide to procedurally place node labels. After using the nodes data to create a network visualization of the Les Miserables play, we filter the nodes to leave out the side characters and pass that array to d3-annotation. We then create a second forceSimulation, this time using the size of the notes as the property in our bounding box collision detection, to move the labels out of each others' way.
d3-annotation by Susie Lu.
forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/625641430adead4bd7dbc9c1ab3f5102'>Network Annotation with Collision Detection</a>