Relation Graph with d3-force

100%

Relation Graph with d3-force

✓ Published1🌍 Public

Last edited Oct 12, 2020

Created on Oct 9, 2020

Forked from 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`.

AI-generated description

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

MIT Licensed

Similar vizzes

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

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

83% match

Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes node-link relationships alongside an adjacency matrix, with both views linked by highlighting a selected node’s row and column on hover or click. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables interactive repositioning and `d3.zoom` supports scaling. Links are colored by group, and matrix cells reflect edge weights via fill opacity, with data loaded from CSV text.

TThe-World-Muda

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

78% match

Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes relationships among nodes in a network, with circle size reflecting group membership and link thickness indicating connection weight. The example loads CSV data from an external source and renders an interactive SVG where users can drag nodes, zoom, and click to highlight connected rows and columns in an accompanying adjacency matrix. It uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for layout, with `d3.drag` and `d3.zoom` for interaction. The code also employs `d3.csv` for data parsing and builds the matrix using SVG rectangles and text elements.

Cchungmin-yu

78% match

Loading thumbnail…

Force Directed Graph

This example combines a force-directed node-link diagram with an adjacency matrix to compare two visualizations of the same graph data. The SVG diagram uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while drag interactions and zoom controls are enabled via `d3.drag` and `d3.zoom`. The adjacency matrix displays link weights through cell opacity, and clicking a node or matrix cell highlights corresponding links and rows in both views. The code loads data via `d3.csv`, `d3.tsv`, and `d3.text`, rendering with D3 v6.

LLigoon

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

78% match

Loading thumbnail…

D3 Force Directed Graph

This force-directed network visualization uses D3’s `forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces to position nodes in an SVG canvas. It displays a hierarchical dataset from `data.js`, where main nodes (e.g., Gemini, Leo) link to colored child and leaf nodes, with link distances defined per relationship (e.g., `MAIN_NODE_DISTANCE`). Nodes are draggable via D3’s `drag` interaction, and the simulation updates circle, text, and line positions on each tick. Colors come from a Paletton-generated palette in `colors.js`.

AAlbert

78% match