back · main · about · writing · notes · reading · d3 · now · contact · uncopyright


Force directed graph: squashed
16 Mar 2017 · 78 words

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)
	.strength(0.2);

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.


back · main · about · writing · notes · reading · d3 · now · contact · uncopyright