Fork of Force Directed Graph

Fork of Force Directed Graph

This example presents a force-directed graph alongside its adjacency matrix, allowing for the exploration of network connections through two complementary views. Clicking a node in the graph highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights the associated edge in the graph. The visualization uses d3.forceSimulation for layout, d3.forceLink for edge constraints, and d3.forceManyBody for repulsion, rendering with SVG. Nodes are colored by group and support drag interactions, while a d3.zoom transform enables panning and scaling. Data appears to be loaded from CSV or TSV sources.

EELBOUNIAmine

Fork of Force Directed Graph

The visualization pairs a node-link force-directed graph with an adjacency matrix view of the same network. The graph is computed using `d3.forceSimulation` with link, many-body, and center forces, while the matrix uses `rect` elements to encode edge weight via fill opacity. Clicking a node highlights its corresponding matrix row and column, and vice versa, with the selected cell emphasized in red. The implementation relies on the D3.js v6 API, including `d3.forceLink`, `d3.forceManyBody`, and custom drag and zoom interactions.

EELBOUNIAmine

Fork of Force Network

This force-directed network graph maps relationships between actors, directors, and films from a JSON dataset. It uses D3 v6's `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` physics, plus `d3.drag` for interactive node repositioning. SVG rendering shows colored nodes (by group), labeled with names, and links labeled with truncated relationship types (e.g., "Acte..." for "Acted in"). Line thickness reflects edge value, and arrowheads are defined via SVG markers.

Ssgzzhinde

Fork of Force Directed Graph

This visualization pairs a force-directed graph with an adjacency matrix of the same network, using d3.forceSimulation, d3.forceLink, and d3.drag to lay out and interact with nodes. Clicking a node highlights its corresponding row and column in the matrix, while the graph’s links are drawn as semi-transparent lines with widths proportional to edge value. The code loads edge data from a CSV file and maps node groups to a fixed color palette, with both views rendered as SVG.

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix, both rendered in SVG using D3 v6. The force layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while nodes are colored by group and draggable. Clicking a node highlights its corresponding row and column in the matrix, and vice versa, using shared link IDs. The data comes from preprocessed edge lists with weighted values, and zooming is enabled via `d3.zoom`.

Mmalipieroproject

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to visualize the same graph, letting users compare both representations. The node-link view uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to generate a network layout, where nodes are colored by group and are draggable via d3 drag. Clicking a node highlights its corresponding row and column links in the matrix, and vice versa; selecting a matrix cell highlights the matching network edge. The graph data comes from the infect-dublin edge list, and the visualization is built with reusable D3 v6 modules rendered in SVG.

Fork of Force Directed Graph

Fork of Force Directed Graph

This visualization pairs a force-directed node-link diagram with an adjacency matrix for a Dublin contact network. Using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, it simulates node physics, while the matrix encodes link weights as cell opacity. Clicking a node or matrix cell highlights its row and column, and interactions support drag-and-drop and zoom via `d3.zoom` and custom drag handlers. Data comes from an edge list of weighted connections, rendered as SVG circles and lines.