Visualize a graph of connections

Visualize graphs with a gradient descent algorithm to minimize the energy of the system.

Minimization method: Distance Spring - Force
Iterations:
Force multiplier:
Numbers off:
Edges off (for huge graphs):
5 -> 6 5 -> 8 6 -> 9 6 -> 10 6 -> 13 7 -> 46 7 -> 48 8 -> 12 8 -> 22 9 -> 14 9 -> 15 9 -> 16 10 -> 17 10 -> 19 12 -> 24 12 -> 25 13 -> 20 13 -> 34 14 -> 26 14 -> 27 15 -> 101 16 -> 30 16 -> 33 17 -> 28 17 -> 32 19 -> 35 19 -> 36 20 -> 38 22 -> 44

Bitcoins?

If you like this please donate bitcoins to 1A8z6qqJgN8GLL7zjKTqnFGoKw2W3mk7SD thanks!

How it works

Thanks to my friend Ahmed for suggesting I do a gradient descent, rather than a genetic algo like I was planning to do. He derived the equations for the distance method and suggested I do something with springs and point charges.

Each node has an x and y coordinate and a function is on the graph is defined. That function (with lots of variables, two for each node) is minimized by performing a gradient descent. Gradient descent works by computing the gradient vector of a function (which points in the direction of maximum increase of the function) and going in the opposite direction to find a local minimum of the function.

Distance Method

The idea behind the distance algorithm is to minimize the square of the distance between nodes and their connected nodes. If this were the only thing however, all the nodes would end up at a single point, so there is an additional constraint that the distance be at least 3*r apart. This is done by minimizing the function (d-3r)^2. As this will never be less than 0 and it'll be 0 when d is 3r, so the function achieves what's desired. The only problem with this (and the reason for thinking about the spring system) is that by minimizing the length of the edges (distances between inter connected nodes), this doesn't take into account that nodes shouldn't be on top of one another. This leads to overlaps.

Spring Method

This method works by minimizing the potential energy of the system. Each edge is a spring and each node acts as a point charge. The energy of the spring is given similarly by (d-3r)^2 for each spring and the force of the charges is given by k/(d-r)^2. Add these two to get the potential energy of the system. In this visualizer I set k to 1000 so that the forces nicely repel the nodes. With k set too low the nodes still clump (without overlap though) because the repulsive force only becomes strong when the nodes are close.

Bad font?

I realize after writing this that the current font is less than ideal. My apologies for that and I'll look for a better font.