Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Concept dependency graph (draft)

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

c77fa7f629684e5298a2cc63afb4a923

Open

Concept dependency graph (draft)

0 stars0🌍 Public
CCurran Kelleher
Last edited May 9, 2025
Created on May 9, 2025
Forked from D3 Starter

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 description

D3 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
  • Custom directional force that arranges nodes based on dependency relationships

Data Structure

The visualization uses two key data files:

  • nodes.json: Contains information about each node, including id, label, description, and chapter
  • edges.json: Contains the connections between nodes with source and target properties

Layout Logic

The graph implements a custom directional force where:

  • Nodes are pushed in specific directions based on their dependencies
  • Source nodes (no dependencies, many dependents) are pushed to the left
  • Sink nodes (many dependencies, no dependents) are pushed to the right
  • The position of each node is determined by analyzing its connectivity pattern

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