Viewing a saved revision (read-only)
1c8df21bd05d4786bd3fe8f60243c362
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
- Left-to-right dependency layout (dependencies on left, dependents on right)
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
Layout Logic
The graph implements a hierarchical left-to-right layout where:
- Nodes that are depended on (fundamental concepts) appear on the left
- Nodes that depend on others (more complex concepts) appear on the right
- The horizontal position of each node is determined by its dependency level
Configuration
All constants and visual parameters are defined in the config.js file, making it easy to adjust the appearance and behavior of the graph without changing the core logic.
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