Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Force Directed Graph

Public visualization

Viewing a saved revision (read-only)

bc91cc7999234f8c8f64f7c7279706cb

Force Directed Graph

0 stars1🌍 Public
Yyptang5488
Last edited Nov 25, 2020
Created on Nov 8, 2020

This example combines a force-directed graph with an adjacency matrix to visualize network data. The code reads a small dataset of nodes and links, rendering the graph as SVG circles and lines using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`. Users can drag nodes and apply zoom via `d3.zoom`. Clicking a node highlights its corresponding row and column in the adjacency matrix, which is built with D3 selections and `rect` elements. The visualization uses a color scale for node groups and includes a dropdown to order matrix rows.

AI-generated description