Force-Directed Graph IT Fork Test

100%

Force-Directed Graph IT Fork Test

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

Forked from Fork of Force-Directed Graph IT

This example visualizes IT infrastructure dependencies as an interactive force-directed graph, with applications as nodes and their interfaces as links. The graph is rendered as SVG circles and lines, with node labels displayed alongside each circle. The code uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide` to position elements, while `d3.drag` enables interactive node dragging. It loads node and link data from separate CSV files (`applications.csv` and `interf.csv`), with links defined by named source and target accessors.

AI-generated description

Creating 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

Similar vizzes

Loading thumbnail…

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.

MMichaelTress

91% match

Loading thumbnail…

Force-Directed Graph IT ct

This force-directed graph visualizes IT application interdependencies, with nodes representing software, servers, and network services. Links indicate connections between systems, where edge strength (from a CSV file) controls the distance between connected nodes via a linear scale. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide`. Nodes are draggable through d3’s `drag` interaction, and the graph renders as SVG circles and lines with text labels.

TTicketToBase

91% match

Loading thumbnail…

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.

AAbdouEnsaj

90% match

Loading thumbnail…

Fork of Force-Directed Graph IT ct with alternatin Power

This network diagram uses force-directed layout to show relationships between IT applications and infrastructure components. Nodes represent applications from a CSV file, while links show connections with varying strength values that determine link distances—stronger connections place nodes closer together. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide` to position the circles. Nodes are draggable through D3's drag interaction, which fixes their positions during dragging. All elements render as SVG circles, text labels, and light gray lines.

MMichaelTress

89% match

Loading thumbnail…

Fork of Force-Directed Graph V9

This force-directed graph visualizes application integration connections, with nodes representing software systems and links indicating data interfaces. Using D3 v7's `forceSimulation` API with `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide`, the layout balances node repulsion against link attraction. Draggable circles use the `drag` interaction, while grey lines and labels update positions dynamically. The graph is rendered as SVG, with node data from `applications.csv` and edge definitions from `interf.csv` representing real-world system dependencies.

TTom Ellis

88% match

Loading thumbnail…

Force-Directed Graph V9

A force-directed graph visualizes application integration links from CSV data, mapping applications as circles and their interfaces as connecting lines. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide` to position nodes, while user interaction is enabled through `d3.drag`. SVG rendering displays labeled nodes and grey links, with text identifiers from the `applications.csv` file. The graph dynamically updates node and edge positions on each simulation tick, showing the complex network of inter-application data flows.

Sschneich

88% match

Loading thumbnail…

Force-Directed Graph V6

This example shows a force-directed graph that maps software applications as circles and their interfaces as connecting lines, with node positions determined by physics-based forces. The visualization uses d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter to calculate layout, while SVG circles and lines render the network. It loads node and link data from separate CSV files (applications.csv and interf.csv) using d3.csv, and updates node positions on each simulation tick. The drag functionality is imported via d3.drag, though it is not explicitly invoked in the visible code.

Sschneich

88% match

Loading thumbnail…

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.

Sschneich

87% match