Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Graph Playground

Public visualization

Viewing a saved revision (read-only)

53c15b6c4f42456289835da988d681b3

Graph Playground

0 stars1🌍 Public
KKyle?
Last edited Mar 30, 2023
Created on Mar 30, 2023

A force-directed graph shows connections between software applications, with nodes representing applications and links representing interfaces between them. The visualization uses a d3.forceSimulation with forceManyBody, forceLink, forceCenter, and forceCollide to position nodes, while SVG circles and lines render the network. Data comes from two CSV files: applications.csv defines node properties (including a colorID) and interf.csv provides source-target pairs with descriptive names. Users can drag nodes to reposition them, and the simulation updates link positions dynamically. Node labels display application IDs, though the colorID column remains unused.

AI-generated description

Creating a force-directed graph, based on data of two csv-files.

Sources:

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