🌍 Public
Fork of Fork of Force-Directed Graph V9 test
This force-directed graph visualizes network connections between IT applications and infrastructure devices, with nodes loaded from applications.csv and links from interf.csv. The example uses d3.forceSimulation with forceManyBody, forceLink, forceCenter, and forceCollide to position nodes, while d3.drag enables interactive repositioning. Rendered as SVG circles and lines, node labels display alongside each element, with gray strokes marking links and text shadows for readability.
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.