Force directed graph: squashed

This example uses a combination of the positioning forces forceX and forceCenter to create a “squashed” aesthetic.

The centering force forceCenter keeps the graph in the centre of the svg element, while forceX drags all the nodes towards x-position 400 on the svg element.

var force_X = d3.forceX(400)

var center_force = d3.forceCenter(width/2, height/2);

The result is a tall and thin graph. Doing the same with forceY instead of forceX leads to a short and fat graph instead.