100%

Clustered Network

✓ Published0🌍 Public

Last edited Dec 3, 2016

Created on Dec 3, 2016

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.

AI-generated description

Experiment …… <a href="http://bl.ocks.org/3071239" 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">∞</a>

Derived from the D3.js example force_cluster.html

Usage

Click on node to expand or collapse.
Click on hull (which shows up when you expanded a group node) to collapse the group.
Drag node to move entire graph around.

Notes

network() is the one who takes care of (re)generating the nodes and links from the original data, based on the collapse[] info, i.e. which group(s) should be shown in collapsed form and which shouldn't.
only group nodes are expected to a .size attribute (read: your own JSON should use that attribute for any node). Same goes for the fields .group_data and .link_count: all of these are expected to be generated by the network() call. (.group_data is a reference to the group (x/y/size/link_count) for a node, group_node.link_count counts the number of links between groups.)
you'll very probably have to tweak .gravity, .charge, .linkDistance and maybe also .linkStrength to make your own graphs look good. Compare the final layout of this graph with the ones produced by the v2.9.6 force_cluster.html D3 code: note the generally quite different position of the groups which have only a single link to other groups; that and other differences are all due to the 4 aforementioned force parameters.

forked from <a href='http://bl.ocks.org/larskotthoff/'>larskotthoff</a>'s block: <a href='http://bl.ocks.org/larskotthoff/4e5dbf8be2c83631a05b'>d3.js: force layout; click to group/bundle nodes</a>

mit Licensed

Similar vizzes

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

95% 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

95% match

Loading thumbnail…

Clustered Network

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.

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

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

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

89% 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

89% match