Viewing a saved revision (read-only)
08bb8e86f9b24fa29642fd823b7c81cd
Concept dependency graph (draft)
This force-directed graph maps dependencies between data visualization concepts across ten chapters, with nodes colored by chapter and arranged along an axis that flows from foundational sources on the left to advanced topics on the right. A custom force within `d3.forceSimulation` pushes nodes horizontally based on their dependency-to-dependent ratio, while link distance and charge spacing separate connected ideas. Hovering reveals node descriptions, and the legend identifies chapter colors. The data loads from `nodes.json` and `edges.json`.
AI-generated descriptionD3 Force-Directed Graph
This project implements a force-directed graph visualization using D3.js.
Features
- Interactive force-directed graph visualization
- Node coloring by chapter
- Tooltips showing node details
- Drag and zoom capabilities
- Responsive design that adapts to window size
- Legend for chapter color mapping
Data Structure
The visualization uses two key data files:
nodes.json: Contains information about each node, including id, label, description, and chapteredges.json: Contains the connections between nodes with source and target properties
Usage
Simply open the index.html file in a browser to view the visualization. You can:
- Hover over nodes to see detailed information
- Drag nodes to reposition them
- Zoom in/out using the mouse wheel
- Pan by clicking and dragging the background