d3.js selection frame example
This example demonstrates an interactive force-directed network graph with rectangle-based selection. Nodes represent characters from *Les Misérables*, with links showing their co-appearance relationships. The force simulation positions the nodes, while each node’s group is encoded with categorical colors. Users can drag nodes to reposition them within the simulation, and click individual nodes to toggle a red dashed selection ring. A separate selection module (selection.js) overlays a semi-transparent orange dashed rectangle on the SVG, allowing users to brush-select multiple nodes simultaneously; selected nodes are visually distinguished by a red dashed stroke. The visualization illustrates how to combine a force-directed layout with custom selection interactions in D3 v4.
AI-generated descriptionBuilt with blockbuilder.org