Skip to main content
SimilarExport ZIP
100%

Actor Graph

✓ Published0🌍 Public
KKyle?
Last edited Apr 6, 2023
Created on Apr 6, 2023
Forked from Graph Playground

This interactive network visualizes the connections between software applications and IT systems, from a dataset of application names and the interfaces linking them. The force-directed graph uses circle nodes for each application and grey lines for their relationships. The visualization is constructed with d3.forceSimulation, d3.forceManyBody, d3.forceLink, d3.forceCenter, d3.forceCollide, and implements a drag interaction.

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…

Graph Playground

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.

KKyle?
83% match
Loading thumbnail…

Actor Graph

This interactive visualization displays a force-directed graph of actors and the movies they appear in, where each actor is represented as a node and connections between actors who share a film are shown as links. The graph is built using D3.js v7, with the `d3.forceSimulation` API handling node positioning and link physics. Data comes from a CSV file listing movies and their cast, parsed using `d3.csvParse`, and rendered as SVG elements (circles, text labels, and lines). The visualization explores collaborative networks among actors across the included film dataset.

KKyle?
81% match
Loading thumbnail…

Actor Graph

The Actor Graph is a force-directed network visualization built with D3.js, showing a small set of connected actors as labeled nodes and edges. It uses the `d3.forceSimulation` API with `forceManyBody` and `forceLink` forces to position the nodes, while `forceCenter` keeps the layout centered in the viewport. The graph is rendered as SVG elements, including circles, lines, and text labels, and is intended to be populated with data from the included `data.csv` file, which lists movies and their casts.

KKyle?
80% 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
79% match
Loading thumbnail…

Actor Graph Attempt 2

A force-directed actor graph visualizes connections between performers who co-star in films from a movie dataset. White nodes and red labels represent actors, while white lines link co-stars. The visualization uses D3 v7’s `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the graph dynamically. An SVG canvas of 10000x10000 pixels renders the network, with node and link positions updated on each simulation tick.

KKyle?
79% 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
77% match
Loading thumbnail…

Force-Directed Graph IT Fork Test

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.

VVonBrank
77% 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
77% match