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

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

Force Directed Graph

This visualization presents a network of interconnected nodes, with each node colored by its assigned group and links showing the connections between them. It combines a force-directed node-link diagram with an adjacency matrix display, revealing both the spatial clustering of relationships and the overall network structure. The force layout is built with `d3.forceSimulation`, including `d3.forceLink` and `d3.forceManyBody`, while user interactions like node dragging, zooming, and hover effects are handled through D3’s drag and zoom APIs. The adjacency matrix uses `d3.scaleBand` axes to map node IDs, and both SVG canvases render the data with animation driven by the simulation tick events.

ZZhou180

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.

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

88% match

Fork of Force Directed Graph

This visualization combines a force-directed node-link diagram with an adjacency matrix to compare two representations of the same graph data. Clicking a node in the diagram highlights the corresponding row and column in the matrix, and clicking a matrix cell highlights the linked edge. The code uses D3 v6 with `d3.forceSimulation`, `d3.forceLink`, `drag`, and `zoom` for interactive layout, while rendering SVG elements for both views. The graph data is loaded from external CSV and edge files, with node colors mapped by group.

87% match

Fork of Force-Graph

This example visualizes a force-directed network graph of game assets, displaying interconnected nodes with labels and colored links. It uses d3.forceSimulation with link, charge, and center forces to position nodes, while d3.drag enables interactive node movement. The SVG rendering maps asset names from a JSON file, with node colors assigned via d3.scaleOrdinal and d3.schemeCategory10.

86% match

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.