Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
d3.js: force layout and a grid-based anti-collision / positioning approach #1
# Editor backup files

Experiment …… ? 8

Derived from the D3.js example force_cluster.html and gist 3104394.


  • all of gist 3104394 @ github
  • collision avoidance approach based on a grid (quantization of position)


As you can see: the visual behaviour is abominable; the quantization forces have to be minor to let the force layout work and they are simply too weak when it comes to manhandling the expanded groups into position.

Lesson learned: don't do this at the same time, if you want it to work. Only when the force layout STOPS, MIGHT you be successful by then switching over to a 'quantizing' layout.

See the above hunch executed as gist 3118901 @ github.


  • Side the 'debug level' slider to see the various debug levels visually; the hospital curves are (top): force.alpha and (bottom) total x/y change squared: a measurement for the amount of movement of nodes in the graph. Note that the bottom curve is inverted, so that when both meet, you're getting close to done. :-)
  • Click on node to expand or collapse. When a node has 'bundled' outgoing links, the first click will expand only those (a.k.a. 2nd display mode / expand state = 1), the next click will then expand the group node itself.
  • Click on hull (which shows up when you expanded a group node) to collapse the group.
  • Drag node to move entire graph around.


  • grid quantization is based on the biggest node, so that each node is guaranteed to fit in a single slot (this limits your viable positions, and hence the maximum number of nodes you'll be able to 'safely' fit in the given area, though!)

  • 'tick' event does the magick: a node is 'attracted' by the EMPTY grid slot it is currently hovering over and REJECTED PERPENDICULAR TO THE DIRECTION IT CAME FROM when said slot is already occupied by another node; this happens on a first-come, first-serve basis, so nodes early in the nodes[] list get to be the choosers here.

Code derived from the d3.js 'force' example:
The miserables.json file contains the weighted network of coappearances of
characters in Victor Hugo's novel /Les Miserables/. Nodes represent characters
as indicated by the labels, and edges connect any pair of characters that
appear in the same chapter of the book. The values on the edges are the number
of such coappearances. The data on coappearances were taken from D. E. Knuth,
"The Stanford GraphBase: A Platform for Combinatorial Computing",
Addison-Wesley, Reading, MA (1993).
The group labels were transcribed from "Finding and evaluating community
structure in networks" by M. E. J. Newman and M. Girvan.
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment