🌍 Public
Viewing a saved revision (read-only)
040cc73d14e44ead8bb1168f648b04e8
Force-Directed Graph V8
A network of 40 application nodes connected by 130 links visualizes system integrations, with each node labeled and draggable. The graph uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide` to position nodes, while SVG circles, lines, and text render the structure. Data comes from two CSV files—`applications.csv` for node IDs and `interf.csv` for link sources and targets. Nodes can be dragged via `d3.drag`, which fixes their position during interaction.
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