Fork of Relation Graph with d3-force

100%

Fork of Relation Graph with d3-force

✓ Published0🌍 Public

Last edited Sep 6, 2021

Created on Aug 29, 2021

Forked from Relation Graph with d3-force

This example visualizes a small entity-relationship diagram (ERD) of database tables and their columns. Table nodes are drawn as larger circles, column nodes as smaller ones, with links connecting tables to their columns and a join link between matching primary and foreign keys. The graph uses `d3-force` with `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` forces to position nodes, while `draggraph` from d3-force enables user interaction. Node labels are added as SVG text elements, and pan/zoom is implemented via `d3.zoom`. The styling uses the `schemeCategory10` color palette from d3.

AI-generated description

Edit of https://vizhub.com/lintonylin/ae9483d1a13142e5808676429ff43da6 to add labels. Example based on an ERD.

MIT Licensed

Similar vizzes

Loading thumbnail…

Relation Graph with d3-force

This example visualizes a small entity-relationship diagram (ERD) of a database schema, showing two tables (FILE and VARIABLE) with their columns as labeled nodes and the foreign-key relationship between them. Drawn with SVG, the graph uses the `d3-force` library’s `forceSimulation`, `forceLink`, and `forceManyBody` to apply a physics-based layout, while the `drag` API enables nodes to be repositioned interactively. Labels are added directly to each node, and the view supports pan and zoom via `d3.zoom`.

JJoris Schelfaut

92% match

Loading thumbnail…

Relation Graph with d3-force

A relation graph of 410 nodes and their pairwise connections, rendered as an interactive SVG force-directed diagram. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes, with each node colored by its group via `schemeCategory10`. Clicking a node highlights all its connected links in red and marks the corresponding cells in an adjacent adjacency matrix, which is rendered as a grid of SVG rectangles. Users can drag nodes to reposition them and zoom into the graph.

Ttoeric

85% match

Loading thumbnail…

Fork of Relation Graph with d3-force

This example shows a force-directed network graph of relationships between characters in Les Misérables, with nodes colored by group and sized by link value. Users can drag nodes to reposition them and zoom into the graph using their mouse or trackpad. The visualization is built with d3-force’s forceSimulation, forceLink, forceManyBody, and forceCenter, along with d3’s zoom and drag behaviors. Data is loaded as JSON from a GitHub gist, and all elements are rendered as SVG.

JJames Bradbury

81% match

Loading thumbnail…

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

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 force-directed graph displays relationships between entities like people and animals, with nodes represented as icons and links labeled with a description. The visualization uses D3.js's `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces to lay out the network, while nodes are rendered as SVG images and edges as paths. Data is loaded from `bulkdata.json` (or `data.json`) and processed using `flattenNode` and `flattenLink` utilities to map node keys to indexes.

110thblock

81% 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

80% match

Loading thumbnail…

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.

Ssalwa191

80% match