Fork of Force-Directed Graph & Adjacency Matrix- D3.js

100%

Fork of Force-Directed Graph & Adjacency Matrix- D3.js

✓ Published0🌍 Public

Last edited Mar 28, 2022

Created on Mar 28, 2022

Forked from Force-Directed Graph & Adjacency Matrix- D3.js

This visualization combines a force-directed graph with an adjacency matrix to explore restaurant connections from a CSV file. The node-link diagram uses d3.forceSimulation with drag interactions and animated ticks, while the matrix displays weighted links through cell opacity and tooltips. Both views render as SVG, with the matrix mapping food-related entities and their relationships using data from food.csv.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Force-Directed Graph & Adjacency Matrix- D3.js

This example pairs a force-directed graph with an adjacency matrix to visualize relationships from a food-themed CSV dataset. The graph uses `d3.forceSimulation` with link and charge forces to position nodes, while draggable circles represent entities. The adjacency matrix uses SVG rectangles, with fill opacity scaled by edge weight, and includes interactive tooltips on mouseover. Both views share the same node-link data, rendered in SVG with animation. The code relies on D3.js v6 APIs including `d3.csv`, `d3.forceLink`, `d3.drag`, and `.join()`.

Pprateekvasi

89% match

Loading thumbnail…

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.

Ssalwa191

84% match

Loading thumbnail…

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.

Ssalwa191

84% match

Loading thumbnail…

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

83% match

Loading thumbnail…

Assignment 7 -- Force-Directed Graph & Adjacency Matrix

This example presents a food-related dataset as both an interactive force-directed graph and an adjacency matrix. The force-directed layout uses `d3.forceSimulation` to position nodes and links, with drag behavior and animated tick updates. The adjacency matrix encodes edge weights through square opacity levels, rendered as SVG rectangles, with tooltips showing source and target IDs. Both visualizations are built with D3 v6, using SVG and animation, drawing from a CSV file.

Vvishusikka

83% match

Loading thumbnail…

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.

Ssalwa191

81% match

Loading thumbnail…

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

81% match

Loading thumbnail…

Fork of Force Directed Graph

This example pairs an interactive force-directed node-link diagram with an adjacency matrix view of the same network data. Dragging nodes in the force simulation or clicking matrix cells highlights corresponding rows, columns, and links in both views. The code uses `d3.forceSimulation` with `forceLink` and `forceManyBody`, and renders as SVG with zoom support. The matrix cells encode link weights through fill opacity, while the node-link view reads edge data from the `infect-dublin.edges` dataset.

Jjas0821

81% match