Skip to main content
SimilarExport ZIP
100%

Fork of Force-Directed Graph V9

✓ Published0🌍 Public
GGauppi
Last edited Oct 20, 2022
Created on Oct 20, 2022

This force-directed graph visualizes the relationships between applications in a hospital information system, using node and link data loaded from two CSV files. Nodes represent applications and links represent data interfaces between them. The example uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide` to position nodes, while circles and lines are rendered in SVG. Dragging is enabled via `d3.drag`, and node labels and link data are drawn from the parsed CSV rows.

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

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 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
90% match
Loading thumbnail…

Fork of Force-Directed Graph V9 11

A force-directed graph visualizes system interfaces between applications, with nodes representing software and links showing data connections based on two CSV files. The graph uses `d3.forceSimulation` with forces for charge, link distance, center positioning, and collision avoidance, while `d3.drag` enables interactive node movement. Each circle and text label updates position during simulation ticks, and grey lines connect related applications. The implementation reads node and link data from CSV files, then renders the network using SVG elements with D3 v7.

AAbdouEnsaj
90% 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…

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
87% match
Loading thumbnail…

Fork of Force-Directed Graph V9 abd

This interactive force-directed graph visualizes the integration relationships between a medical institution's software applications. Nodes represent systems like NAV, Ines, and Labor7, while edges show data exchanges (e.g., patient cases, financials). The layout is computed via d3.forceSimulation with forces like d3.forceManyBody, d3.forceLink, d3.forceCenter, and d3.forceCollide. Users can drag nodes, and the visualization is rendered as an SVG with circles and labels, based on two CSV files (applications.csv and interf.csv).

AAbdouEnsaj
87% match
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
86% 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
86% match
Loading thumbnail…

Force-Directed Graph V7

A force-directed graph visualizes application interfaces from CSV data, mapping each application to a colored circle with its name in a text label. The simulation uses d3.forceSimulation with forceManyBody, forceLink, forceCenter, and forceCollide to position nodes, while links are drawn as lines between connected applications. The code parses nodes and links from CSV files, assigns colors from a palette, and supports drag interaction to reposition nodes, restarting the simulation on each drag.

Sschneich
85% match