Skip to main content
SimilarExport ZIP
100%

Clustered Network

✓ Published0🌍 Public
Ttgu007
Last edited Nov 14, 2021
Created on Nov 14, 2021
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

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
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
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
88% 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
88% 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
87% 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
87% match