Force-directed graph layout.

Provides a physics-based simulation for positioning nodes in a graph. The simulation runs as a GenServer, making it suitable for real-time updates in LiveView applications.

Basic Usage

# Define nodes and links
nodes = [
  %{id: "a"},
  %{id: "b"},
  %{id: "c"}
]

links = [
  %{source: "a", target: "b"},
  %{source: "b", target: "c"}
]

# Start simulation; a subscriber given here receives every tick from the first
{:ok, sim} = Visualize.Layout.Force.start_link(
  nodes: nodes,
  links: links,
  subscribers: [self()]
)

# A process that joins a running simulation later subscribes
Visualize.Layout.Force.subscribe(sim, other_pid)

LiveView Integration

def mount(_params, _session, socket) do
  {:ok, sim} = Visualize.Layout.Force.start_link(
    nodes: @nodes,
    links: @links,
    forces: [
      {:center, x: 300, y: 200},
      {:many_body, strength: -100},
      {:link, distance: 50}
    ],
    subscribers: [self()]
  )

  {:ok, assign(socket, sim: sim, nodes: [], links: [])}
end

def handle_info({:force_tick, %{nodes: nodes, links: links}}, socket) do
  {:noreply, assign(socket, nodes: nodes, links: links)}
end

Available Forces

• :center - Keeps the graph centered

  • x, y: center coordinates
  • strength: how strongly to center (default: 1)

• :many_body - Repulsion/attraction between all nodes

  • strength: negative for repulsion, positive for attraction (default: -30)
  • theta: Barnes-Hut approximation threshold (default: 0.9)
  • distance_min, distance_max: distance bounds

• :link - Spring forces between connected nodes

  • distance: target distance (default: 30)
  • strength: spring strength (default: 1)
  • iterations: constraint iterations per tick (default: 1)

• :collision - Prevents node overlap

  • radius: node radius or function (default: 10)
  • strength: collision strength (default: 1)

• :x - Push nodes toward an x position

  • x: target x or function
  • strength: force strength (default: 0.1)

• :y - Push nodes toward a y position

  • y: target y or function
  • strength: force strength (default: 0.1)

• :radial - Push nodes toward a circle

  • radius: target radius or function
  • x, y: circle center
  • strength: force strength (default: 0.1)