Skip to main content
SimilarExport ZIP
100%

D3 Selectable Force-Directed Graph

✓ Published0🌍 Public
FFrissAnalytics
Last edited May 31, 2018
Created on May 31, 2018

This interactive D3 visualization demonstrates a force-directed network graph where nodes can be repositioned through dragging. Users can select multiple nodes using shift-click or by drawing a selection rectangle, enabling simultaneous movement of grouped nodes. The graph renders as an SVG using d3.forceSimulation, with selection semantics similar to window managers: clicking a node selects it exclusively, while shift-clicking toggles individual nodes. The implementation includes a zooming behavior via a custom d3.svg.brush for rectangular selection and a zoomer for scaling and panning the entire graph.

AI-generated description

This is an extension of Mike Bostock's Draggable Network II example, allowing one to drag multiple nodes in a force-directed graph. Nodes can be selected by holding the shift key and either dragging on the canvas or clicking on specific nodes. The selection and dragging semantics aim to mirror those of most window managers:

  1. Shift clicking on a node toggles whether it is selected
  2. Clicking (without shift) on a node, selects it and deselects everything else.
  3. Shift dragging on the canvas toggles the selection status of the nodes enclosed within it.
  4. Dragging a set of selected nodes drags all of them.
  5. Clicking on the canvas de-selects everything.

forked from <a href='http://bl.ocks.org/pkerpedjiev/'>pkerpedjiev</a>'s block: <a href='http://bl.ocks.org/pkerpedjiev/0389e39fad95e1cf29ce'>D3 Selectable Force-Directed Graph</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics
85% match
Loading thumbnail…

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.

JJosephSKh
83% match
Loading thumbnail…

Navigate and Zoom around graph

This interactive graph visualization uses a force-directed layout to arrange nodes connected by links. Users can pan by clicking the background, zoom with the mousewheel, and drag individual nodes. Middle-clicking a location adds a new node at that point. The d3.v3 library provides the force simulation, zoom behavior, and drag interactions, while nodes and links are rendered as SVG elements. The graph displays a network with labels on each node, and buttons allow freezing, thawing, or fitting the graph to the viewport.

FFrissAnalytics
82% match
Loading thumbnail…

Force Directed Graph

A force-directed graph displays a network of 410 nodes and their connections, with node colors assigned by group via `d3.schemeCategory10`. The visualization pairs the graph with an adjacency matrix rendered as SVG rectangles, where users can click either nodes or grid cells to highlight corresponding links and matrix positions. Built with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, the graph supports drag-and-drop node repositioning and zoom/pan interactions through `d3.zoom`. The adjacency matrix uses `d3.select` to update stroke and fill opacity based on edge weights.

WWei-Che Chang
82% match
Loading thumbnail…

D3 Force-Directed Graph

This example demonstrates a force-directed network layout, visualizing a small set of nodes and their connections with interactive dragging. The graph dynamically arranges connected circles using a physics simulation, cleanly separating linked nodes while repelling them from one another. The visualization is built with D3 v7, using `d3.forceSimulation` together with its `forceLink`, `forceManyBody`, and `forceCenter` components. The SVG output renders nodes as circles with labels and edges as straight lines, with positions updated on each simulation tick. The code also includes a guard that filters out any edges referencing non-existent nodes, ensuring the structure remains valid.

KKhanin Sisaengsuwanchai
82% match
Loading thumbnail…

Draggable Network II

This interactive network visualization uses a force-directed layout to display a graph with 80 nodes and numerous links. Users can select individual nodes or drag a rectangular brush across the background to select multiple nodes, with the SHIFT key toggling additional selections. Once selected, nodes can be dragged to reposition, with connected links updating in real-time via the `d3.drag` and `d3.brush` APIs. Arrow keys also nudge selected nodes incrementally. The example demonstrates customizing a force-directed layout through manual adjustment, using the D3.js v4 library and rendering to SVG.

Mmbostock
82% match
Loading thumbnail…

Zoomable Force Directed Graph d3v4

This graph uses a force-directed layout to arrange a network of named characters, with gray links showing relationships and black circles for nodes. Users can zoom and pan the entire visualization via mouse interactions. The example is built with d3.v4, using d3.forceSimulation with d3.forceLink and d3.forceManyBody, and renders to SVG. The node and link data are hardcoded in the script, with links flagged as allies or enemies.

FFrissAnalytics
81% match
Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes node-link relationships alongside an adjacency matrix, with both views linked by highlighting a selected node’s row and column on hover or click. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables interactive repositioning and `d3.zoom` supports scaling. Links are colored by group, and matrix cells reflect edge weights via fill opacity, with data loaded from CSV text.

TThe-World-Muda
81% match