Grouping nodes in a Force-Directed Graph

100%

Grouping nodes in a Force-Directed Graph

✓ Published0🌍 Public

Last edited Jul 17, 2017

Created on Jul 17, 2017

This example shows a force-directed graph of character interactions from *Les Misérables*, with colored convex hulls grouping nodes that share the same community. Users can drag individual nodes or entire group hulls independently, and adjust the hull’s scale via a slider or change its curve type (e.g., `d3.curveCatmullRomClosed`) from a dropdown. The visualization uses `d3.forceSimulation` for layout and `d3.polygonHull` to compute each group’s boundary, rendering nodes as SVG circles and links as lines with animated transitions.

AI-generated description

Example of a force-directed graph with an extra layer for grouping nodes.

Nodes and groups can be dragged indepedently. The type of curve and the scale of the shape can be tuned in order to define the contour of the group shapes

forked from <a href='http://bl.ocks.org/XavierGimenez/'>XavierGimenez</a>'s block: <a href='http://bl.ocks.org/XavierGimenez/a8e8c5e9aed71ba96bd52332682c0399'>Grouping nodes in a Force-Directed Graph</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force directed graph

This example shows a force-directed graph of character co-occurrence data from Les Misérables, rendered as an interactive SVG animation. It uses d3.forceSimulation to position nodes and links, with draggable circles representing characters and colored convex hulls drawn around groups of three or more nodes sharing the same group attribute. The hulls are generated using d3.polygonHull and closed curves, with a dropdown to switch between curveBasisClosed, curveCardinalClosed, curveCatmullRomClosed, and curveLinearClosed. The visualization is built with D3 v4 and React, loading graph data from a JSON file.

Kkalokli8

84% match

Loading thumbnail…

29.Force-Directed Graph

This example shows a force-directed graph of character co-appearances in *Les Misérables*, with nodes colored by group membership and link thickness scaled by interaction weight. Using D3 v4, it loads data from `miserables.json` and runs a `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions. Nodes and links render as SVG circles and lines, and the visible `ticked` function updates their coordinates. The code also wires up `d3.drag` handlers to let viewers reposition nodes.

深深度碎片

84% match

Loading thumbnail…

Grouped Force Layout

This visualization uses a grouped force layout to cluster the character network from *Les Misérables* by community. Draggable nodes are colored by group, with links showing connections, while a Voronoi overlay dynamically partitions the space to visually reinforce each cluster’s territory. The simulation runs on `d3.forceSimulation` with link and charge forces, and custom logic on each tick adjusts node positions toward their group’s centroid. The Voronoi cells, rendered as SVG paths via `d3.voronoi`, update continuously as the layout settles or as users drag nodes.

FFrissAnalytics

84% match

Loading thumbnail…

Force Directed Graph

A force-directed graph displays character relationships from Les Misérables, with nodes colored by group affiliation and labeled with character names. The visualization uses d3.forceSimulation to position nodes and links, while a secondary label simulation keeps text labels readable. Hovering highlights a node's immediate neighbors by adjusting opacity. The SVG rendering includes zoom and drag interactions, and the data comes from the bundled data.json file.

KKarkG

82% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Les Misérables, grouping related characters into proximity while separating unrelated ones. Drawn as SVG circles and lines, nodes are colored by group and links weighted by interaction frequency. The data, compiled by Donald Knuth and stored in `miserables.json`, drives a `d3.forceSimulation` with link, charge, and center forces. Interactive dragging is enabled via `d3.drag`, while node positions update on each simulation tick.

NNate-Holland

82% match

Loading thumbnail…

d3-force

A force-directed graph visualizes character interactions from Les Misérables, with 410 nodes colored by group and 410 weighted links. Users can drag individual nodes and zoom the SVG canvas. The implementation uses `d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`, `d3.zoom`, and `d3.drag`, with node colors derived from `schemeCategory10` and data loaded from a TSV file.

Ttoeric

81% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with nodes representing characters and links indicating shared appearances. The layout uses D3 v4’s `d3.forceSimulation` and `d3.forceLink`, though the standard simulation is commented out, leaving nodes positioned randomly via `Math.random` while links are drawn with calculated coordinates. Node color encodes group membership via `d3.scaleOrdinal` and `d3.schemeCategory20`, and drag interactions are enabled with `d3.drag`. The data is compiled by Donald Knuth and rendered as SVG.

ZZhengyan Yu

81% match

Loading thumbnail…

Force-Directed Graph

This interactive force-directed graph visualizes character co-appearance relationships from the *Les Misérables* dataset. Nodes represent characters and are colored by their assigned group, while black links connect characters that appear together. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute physics-based layouts. Nodes and labels are rendered as SVG circles with drag functionality, and a zoom transform is applied via the d3 zoom controller.

KKhanin Sisaengsuwanchai

81% match