Victor Lorena

@victorlorena·3 public vizzes

Fork of Interactive Force Directed Layout

A fork of the Interactive Force Directed Layout example uses GoJS to demonstrate a continuously running force-directed layout where users can push and pull nodes. The layout automatically spreads nodes apart while dragging, with selected nodes remaining fixed. The diagram uses circular node templates and arrowed links with labels, styled through GoJS GraphObject.make. The code includes a model change listener to invalidate the cached network when structure changes.

Apr 5, 2021

Loading thumbnail…

Fork of Relation Graph with d3-force

This visualization shows the network of character co-appearances in Les Misérables as a force-directed graph, with nodes colored by group using d3.schemeCategory10 and links weighted by interaction frequency. The graph supports interactive dragging of individual nodes via d3.drag, and users can zoom and pan the entire view using d3.zoom with a scale range up to 8x. The simulation is computed with d3.forceSimulation, combining forceLink, forceManyBody, and forceCenter, while the SVG rendering updates node positions on each tick. Data is loaded asynchronously from a JSON file containing the Miserables dataset.

Mar 29, 2021

Loading thumbnail…

Graph

This graph visualization maps the relationships between actors, directors, and films using a force-directed layout. It displays movies as one node type and the people involved as another, with arrows indicating the specific role each person played in a production, such as acting or directing. The visualization uses the D3.js library with the `d3.forceSimulation` and `d3.forceLink` APIs to simulate physical forces that position the nodes, while a custom drag interaction lets users rearrange the network. Data comes from the provided `data.json` file, which contains nodes for people and films along with links specifying their relationships.

Mar 3, 2021