Relation Graph with d3-force

100%

Relation Graph with d3-force

✓ Published0🌍 Public

Last edited Nov 22, 2020

Created on Nov 4, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Force Directed Graph

This visualization employs a force-directed graph to display a dataset of 410 linked nodes, loaded from a TSV file. The d3-force simulation, using `forceSimulation`, `forceLink`, and `forceManyBody`, positions the nodes with link thickness proportional to edge weight. Nodes are colored by a group value, and interactive dragging with `d3.drag` and zooming with `d3.zoom` are enabled. A separate, non-interactive adjacency matrix, built with `d3.select` and `reorder`, is shown but not linked to the graph.

Aa04775

86% match

Loading thumbnail…

Fork of 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.

Mmach9github

85% match

Loading thumbnail…

Force Directed Graph

This example combines a force-directed graph with an adjacency matrix to visualize network connections. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while links are drawn as SVG lines with widths proportional to edge values. Clicking a node highlights its corresponding row and column in the matrix, and both elements support zooming via `d3.zoom`. Node colors and radii encode group membership, with a legend showing the six group categories.

LLigoon

84% match

Loading thumbnail…

Force-Directed Graph

This is a force-directed graph visualization rendered as an SVG, showing three nodes and three links in a small network. The node and link positions are determined by a physical simulation where nodes repel each other and links pull connected nodes together. The code uses `d3.forceSimulation` to combine `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, updating SVG circle and line elements on each simulation tick. The data comes from a local JSON file with node IDs and link source/target references.

Ttkcj0912

84% match

Loading thumbnail…

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

84% match

Loading thumbnail…

Force Directed Graph

A force-directed graph of 410 connected nodes is shown alongside an adjacency matrix, letting users explore network structure through either view. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. The layout uses d3.forceSimulation with forceLink and forceManyBody, rendered as SVG circles and lines, with a zoom transform applied to both. The adjacency matrix is built from the same edge data, and hover effects use dynamically updated stroke colors and widths.

Aa04775

84% match

Loading thumbnail…

Force-Graph

This example shows a force-directed graph of four named nodes connected by weighted links, rendered as SVG within a React framework. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while the simulation’s `tick` event updates node and link coordinates. Nodes are draggable via `d3.drag`, and links are colored using a `d3.scaleOrdinal` based on `d3.schemeCategory10`. Data is loaded from a local JSON file, and node labels are displayed as text elements.

RRafael Campos

83% match