how I learned to stop worrying and optimize my Force Directed Graphs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706739/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708318/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708323/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715759/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715968/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716313/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8719713/pasted-from-clipboard.png)
graph,
WHO ARE YOU?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706791/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710677/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708404/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715965/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716320/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706711/pasted-from-clipboard.png)
or
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706665/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708318/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708321/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708322/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708323/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715778/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715794/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715959/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706668/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708321/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715796/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715906/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8719835/pasted-from-clipboard.png)
fun facts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706684/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706719/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708309/pasted-from-clipboard.png)
CW
CCW
'winding'
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715799/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715903/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708228/pasted-from-clipboard.png)
non orientable manifold, lol!
fun fact
funny properties
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710188/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710200/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710206/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710209/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710494/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715972/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716324/pasted-from-clipboard.png)
funny things to do
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710492/pasted-from-clipboard.png)
Half-Edge
Dijkstra, A*...
Minimum Spanning Tree
normal unifomisation
Delaunay, Voronoi, "navmeshes"
2D visibility
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715914/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710494/pasted-from-clipboard.png)
funny things to do
wow, such ALIVE!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715933/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715937/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715942/pasted-from-clipboard.png)
GRAPH !
dead penguin ->
funny Force Directed Graph
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715838/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708315/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716313/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716320/pasted-from-clipboard.png)
a funny algorithm
// define the rest length
const restLength = 50;
// update loop
graph.vertices.forEach(function (a) {
//attraction
a.neighbours.forEach(function (b) {
const dx = b.x - a.x;
const dy = b.y - a.y;
const d = Math.sqrt(dx * dx + dy * dy);
const diff = restLength / a.neighbours.length - d;
const offx = ((diff * dx) / d) * 0.5;
const offy = ((diff * dy) / d) * 0.5;
a.x -= offx;
a.y -= offy;
b.x += offx;
b.y += offy;
});
//repulsion
graph.vertices.forEach(function (b) {
if (a == b) return;
const dx = b.x - a.x;
const dy = b.y - a.y;
const d = Math.sqrt(dx * dx + dy * dy);
const diff = restLength - d;
const offx = ((diff * dx) / d) * 0.01;
const offy = ((diff * dy) / d) * 0.01;
a.x -= offx;
a.y -= offy;
b.x += offx;
b.y += offy;
});
});
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710770/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710767/pasted-from-clipboard.png)
attract
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710766/pasted-from-clipboard.png)
repel
R: desired edge length
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710793/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715865/pasted-from-clipboard.png)
a funny example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715919/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715919/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715919/pasted-from-clipboard.png)
funny libs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710741/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706791/pasted-from-clipboard.png)
3D Force-Directed Graph
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710793/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710793/pasted-from-clipboard.png)
a funny sample
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716214/pasted-from-clipboard.png)
import ForceGraph3D from "3d-force-graph";
//1 create a FDG simulation
const FDG = ForceGraph3D({
logarithmicDepthBuffer: true, // three.js renderer settings
})(this.container); //<- add renderer to DOM
const data = {nodes:[], links:[]};//get the data from a graph
graph.nodes.forEach((node) => {//create the nodes
data.nodes.push({ x: node.x, y: node.y, z: node.z,
data:'whatever you want this node to hold' });
});
graph.edges.forEach((link) => { //create the edges
data.links.push({ source: link[0], target: link[1], });
});
FDG.graphData(data);//feed the graph data to the FDG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716421/pasted-from-clipboard.png)
funny helpers
//set some useful helper
FDG.onNodeHover((node) => {}); //get node on roll over
FDG.onNodeClick((node) => {}); //get node on click
FDG.onLinkHover((link) => {}); // same for links
FDG.onLinkClick((link) => {});
FDG.nodeHoverPrecision(10); //click & hover precision (in pixels)
FDG.linkHoverPrecision(10);
//for DAG (Directed Acyclic Graph) only: render presets
FDG.dagLevelDistance(100);
FDG.dagMode("tr");
FDG.warmupTicks(50); //precomputes the layout for X iterations
FDG.cooldownTicks(100); //ticks before calling "onEngineStop"
FDG.onEngineTick(() => {}); //on FDG update
FDG.onEngineStop(() => {}); //called when the FDG has cooled down
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716952/pasted-from-clipboard.png)
funny optimisation
edge = { a : G.nodes[x], b : G.nodes[y] }
G.edges = [ edge, ... ]
ahah silly!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8708395/pasted-from-clipboard.png)
cunning!
G.edges = [ [x, y], [y, z], ... ]
=> G.edges = [ x,y,y,z... ]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716983/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716987/pasted-from-clipboard.png)
funny optimisation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710398/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710403/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710408/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710409/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710419/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8710428/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8706791/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715885/pasted-from-clipboard.png)
cunning!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8716987/pasted-from-clipboard.png)
funny further reading
all manners of graphs, from theory to practice to actually useful stuffs for game dev and more
PARAGRAPHL
https://nblintao.github.io/ParaGraphL/
(shameless plug) Graph, a hidden hero
https://barradeau.com/blog/?p=651
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715885/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8715890/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8700914/pasted-from-clipboard.png)
funny Machine Learning take on graphs encoding
funny Machine Learning take on graphs encoding
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8739204/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8700948/pic_13.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/8700951/pic_13.png)
"half edge data structure | unreal"
"a graph is a data strcuture | vray"
THAT'S ALL FOLKS!
american pie graph
By nicolas barradeau
american pie graph
- 719