Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Force-Directed Graph & Adjacency Matrix- D3.js

Public visualization

Viewing a saved revision (read-only)

54854a6987684c9b8b01f617afd8848a

Force-Directed Graph & Adjacency Matrix- D3.js

0 stars1🌍 Public
Pprateekvasi
Last edited Mar 28, 2022
Created on Mar 28, 2022
Forked from Multiline chart

This example pairs a force-directed graph with an adjacency matrix to visualize relationships from a food-themed CSV dataset. The graph uses `d3.forceSimulation` with link and charge forces to position nodes, while draggable circles represent entities. The adjacency matrix uses SVG rectangles, with fill opacity scaled by edge weight, and includes interactive tooltips on mouseover. Both views share the same node-link data, rendered in SVG with animation. The code relies on D3.js v6 APIs including `d3.csv`, `d3.forceLink`, `d3.drag`, and `.join()`.

AI-generated description