100%

Clustered Network

✓ Published0🌍 Public

Last edited Sep 18, 2012

Created on Jul 8, 2012

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.

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 expand[] info, i.e. which group(s) should be shown in expanded 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.

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

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

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

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

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

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

91% match

Loading thumbnail…

Clustered Network

This interactive visualization of the Les Misérables character network supports collapsing and expanding clusters of characters, showing the weighted coappearances from Knuth's Stanford GraphBase data. The example uses d3.v2 with `forceSimulation` to layout both group and leaf nodes, and renders nodes, links, and cluster hulls as SVG elements. Users can click nodes and hulls to cycle through display modes, which illustrate a chained force layout where a secondary force calculation positions helper nodes for drawing curved links.

KKuerzibe

89% match

Loading thumbnail…

Clustered Network

This interactive visualization displays a clustered network using the Les Misérables character co-occurrence data, grouping nodes into colored convex hulls that represent character communities. Each cluster can be expanded or collapsed, with force-directed layout positioning nodes and links between them. The implementation leverages D3 v2’s force layout, SVG rendering, and custom convex hull path generation, with React managing the interface and smooth animations for cluster expansion and collapse.

Ttgu007

89% match