Clustered Network
This interactive visualization displays the weighted coappearance network of characters from Victor Hugo's *Les Misérables*, with nodes grouped into clusters by community. Built with D3 v2, it uses a force-directed layout with a grid-based collision avoidance system. Users can click nodes to expand or collapse groups, revealing convex hulls around clusters, and drag to reposition the entire graph. Debug sliders and activity monitors allow real-time inspection of the layout's convergence and movement dynamics.
AI-generated descriptionExperiment �� <a href="http://bl.ocks.org/3125434" title="view this gist via bl.ocks.org">?</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">8</a>
Derived from the D3.js example force_cluster.html and gist 3104394.
Features
- all of gist 3104394 @ github
- collision avoidance approach based on a grid (quantization of position)
A FAILED EXPERIMENT
As you can see: the visual behaviour is not good (it may look okay, but it should be an improvement upon gist 3117757 @ github.
Lesson learned: I should've known by now that trying to press-roll a single force into doing both layout an grid-based positioning/collision avoidance is a pipe dream. On to #3...
Usage
- 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.
Notes
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: this attempt tried to cajole the force layout into playing nice by feeding it the quantized positions as .px/.py target data instead, riding the same ticket that the force-internal 'charge' code does. No dice. Influence is too little, and when you beef it up, you're getting toasted in all sorts of other ways.