Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Force Directed Graph

Public visualization

Viewing a saved revision (read-only)

9afeb1f5d84648f680c8216b39ccd26e

Force Directed Graph

0 stars1🌍 Public
WWei-Che Chang
Last edited Nov 6, 2020
Created on Nov 6, 2020

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.

AI-generated description