Skip to main content
100%

d3.js selection frame example

✓ Published0🌍 Public
JJosephSKh
Last edited Jun 29, 2017
Created on Jun 29, 2017

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 description

Built with blockbuilder.org

mit Licensed

Similar vizzes