Skip to main content
SimilarExport ZIP
100%

Clustered Network

✓ Published0🌍 Public
GGerHobbelt
Last edited Sep 10, 2012
Created on Sep 4, 2012

This interactive visualization displays the co-appearance network of characters from Victor Hugo’s *Les Misérables*, using a force-directed layout with clustered groups. Nodes represent characters, while edges show shared chapters, with the option to expand or collapse clusters and self-referential links. The example uses D3 v2, employing two `d3.layout.force` instances: one for the primary nodes and another for helper nodes that generate bezier-curved links. Debug modes overlay traces of force.alpha and movement energy, rendered as SVG paths with animated updates, based on data by D. E. Knuth and community groupings from Newman and Girvan.

AI-generated description

Experiment �� <a href="http://bl.ocks.org/3616279" 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
  • showcases a tweaked 'miserables.json' file which includes 'circular links' i.e. links which connect node A to node A (~ self-reference)

Usage

  • Slide 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

The ability to draw circular references is following the overall force design used here, where helper nodes (and ditto links) are used to produce the bezier-based links; a self-reference is nothing but yet another nodeA -> helper -> nodeB link chain where 'nodeB' just happens to be nodeA again.

This code uses two(2) d3.layout.force() forces: one to layout the original nodes (or their group node equivalent), the second is used to layout all the helper nodes (which are only visible in debug modes 1 and 2): the latter are used to construct the bezier paths representing the links.

Similar vizzes

Loading thumbnail…

Clustered Network

This interactive visualization displays the weighted coappearance network of characters from Victor Hugo’s Les Misérables. Using D3’s force layout (d3.force) with SVG rendering, nodes represent characters, edges link those appearing in the same chapter, and group labels reflect community structure. Users can drag nodes, click to expand or collapse grouped clusters, and adjust debug sliders that animate force alpha and movement traces. A collision-avoidance grid quantizes node positions based on the largest node size.

GGerHobbelt
96% match
Loading thumbnail…

Clustered Network

The interactive visualization displays the weighted coappearance network of characters from Victor Hugo’s *Les Misérables*, with nodes representing individuals and edges denoting shared chapters. Users can click nodes to expand or collapse clustered groups, revealing community structure. The example uses the D3.js force-directed layout from `d3.forceSimulation`, enhanced with a grid-based collision-avoidance system that quantizes node positions. Rendered as SVG with animation, the interface also plots debug curves showing force alpha and node movement, while links and hulls are drawn using SVG paths.

GGerHobbelt
96% match
Loading thumbnail…

Clustered Network

This clustered network visualization renders the coappearance relationships between characters in Victor Hugo’s *Les Misérables*, using weighted edges to show how often characters appear together in the same chapter. The view groups characters by community structure, displaying individual nodes as small circles and collapsed groups as larger clusters surrounded by translucent convex hulls. Clicking a node expands or collapses its group, while dragging any element moves the entire graph. The code builds the layout with the D3 v2 force layout, computes hull paths via `d3.geom.hull`, and animates transitions on SVG elements.

FFrissAnalytics
94% match
Loading thumbnail…

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.

GGerHobbelt
94% match
Loading thumbnail…

Clustered Network

This clustered network diagram visualizes character coappearances in Victor Hugo’s Les Misérables, using a force-directed layout with collapsible group nodes. Built with D3 version 2, it renders SVG and animation, adapting the classic d3.force example with a grid-based collision-avoidance experiment. Clicking nodes expands or collapses bundled links and group hulls, while draggable nodes move the graph. The visualization includes debug sliders and activity monitors showing force alpha and movement levels.

GGerHobbelt
94% match
Loading thumbnail…

Clustered Network

This clustered network visualization uses a dual-force layout to display the co-appearance relationships between characters in *Les Misérables*. Through d3.v2’s `d3.layout.force`, nodes collapse into group clusters or expand to show individual links and hulls, with click interactions cycling through three display states. A second force layout positions helper nodes that shape cubic spline curves for the original links. The data comes from Knuth’s Stanford GraphBase, with community groups transcribed from Newman and Girvan.

GGerHobbelt
92% match
Loading thumbnail…

Clustered Network

This example shows a clustered network of character co-occurrences from Victor Hugo's Les Miserables, where nodes represent characters and edges represent shared chapters. Users can click on group nodes to expand or collapse clusters, revealing individual characters or hiding them within hulls. The visualization uses d3.layout.force for physics-based layout with adjustable gravity, charge, and link distance parameters, while d3.svg.line with cardinal interpolation draws the convex hulls around collapsed groups. The data is loaded from a JSON file containing 77 nodes and 254 weighted links, with group assignments derived from community structure analysis.

GGerHobbelt
92% match
Loading thumbnail…

Clustered Network

A clustered network of character co-occurrences from Les Misérables is visualized using D3’s force layout with SVG rendering. Nodes represent characters, grouped by community, while edges show coappearance weights. The animation supports interactive expansion and collapse of clusters via clicks, with a slider for debug levels and force parameters. Grid-based collision avoidance is attempted through position quantization, though the README notes this failed to improve layout stability.

GGerHobbelt
90% match