🌍 Public
Fork of Force-Directed Graph IT
A force-directed graph visualizes IT application dependencies from two CSV files, with circles and text labels for nodes and lines for links. Using d3.forceSimulation, the graph applies forceManyBody, forceLink, forceCenter, and forceCollide to position nodes, while drag interaction lets users move nodes and restart the simulation. The SVG rendering updates node coordinates and link endpoints on each tick, with data parsed from applications.csv and interf.csv.
AI-generated descriptionCreating a force-directed graph, based on data of two csv-files.
Sources:
- Scatter Plot: https://www.youtube.com/watch?v=xkBheRZTkaw&t=37528s
- force-directed graph: https://www.youtube.com/watch?v=y7DxbW9nwmo
- documentation: https://github.com/d3/d3-force
- Accessor with named sources and targets: https://github.com/d3/d3-force#link_id
Text, Color, Drag: https://youtu.be/y7DxbW9nwmo?t=1696
Filter:
open issues:
- count number of links -> change force (number of links > 1 -> push appart / number of links < 1 -> force together)
- add arrows to links
- change interf.csv (wrong source data for filters)
- add filter options
MIT Licensed
Comments
Sign in to join the discussion.