Skip to main content
100%

D3v4 Force Layout with Covex Hull

✓ Published0🌍 Public
Aandrew-reid
Last edited Jul 14, 2017
Created on Jun 8, 2017

This example demonstrates a force-directed network graph using D3v4, with the nodes and links of the Les Misérables character co-occurrence dataset. A semi-transparent convex hull, computed via `d3.polygonHull`, dynamically wraps the entire set of nodes, updating its path on every simulation tick. Nodes are colored by group, links are weighted by line thickness, and the hull provides a visual boundary around the full network. The SVG rendering uses D3’s force simulation to position nodes and links, while the hull path is recomputed each tick to enclose all node positions.

AI-generated description

A quick attempt to achieve a minimum convex hull on a force in v4 (as opposed to v3 ).

In v4 there are no accessor methods, so the d3.polygonHull function takes only arrays of coordinates from the looks of it (June 2017).

Similar vizzes

Loading thumbnail…

D3v3 Force Layout with Minimum Convex Polygon

A D3v3 force layout displays character co-occurrences from Les Misérables as a network of labeled nodes and gray links, with a translucent green convex hull polygon enclosing the entire graph. The hull updates dynamically as nodes move during simulation, using an intermediate vertex array to compute the polygon boundary. The example combines d3.layout.force for node positioning with d3.geom.hull to calculate the minimum convex polygon around all current node coordinates, rendered as an SVG path with light green fill and steelblue stroke.

Aandrew-reid
89% match
Loading thumbnail…

Grouping nodes in a Force-Directed Graph

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.

TThanaporn-sk
83% match
Loading thumbnail…

Force Directed With Symbols, d3v4

This example shows a force-directed network graph of the co-occurrence of characters in Victor Hugo’s Les Misérables, rendered as SVG. Nodes are drawn as symbols (shapes) scaled by group, using d3.symbol() with a d3.scaleOrdinal over d3.symbols, while links are lines whose stroke width reflects connection weight. Node color encodes group membership via d3.schemeCategory20. The d3 v4 force simulation with charge, link, and centering forces drives the layout; nodes are draggable and reposition during the simulation, with a tick handler updating link endpoints and node transforms. Data is loaded from the classic miserables.json co-occurrence dataset.

Aandrew-reid
82% match
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
82% match
Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed network graph shows 100 colored nodes grouped into 30 clusters, linked by sparse connections and enclosed by a Voronoi partition that updates as nodes settle into position. The code runs 120 ticks of `d3.forceSimulation` with forces for links, charge, X/Y positioning, collision, and centering. Hovering a Voronoi cell highlights the enclosed node and its incident links. Rendering uses SVG circles, lines, and paths, with `d3.voronoi` computing the polygon boundaries over the simulated node coordinates.

CCtuauden
82% match
Loading thumbnail…

(d3v4) Force Layout w highlights

This interactive force-directed network visualization displays character relationships from Les Misérables, with nodes colored by community group and links sized by connection strength. Built with D3 v4, it includes a dropdown filter to select character groups, highlighting connected nodes and links while fading others. Nodes can be dragged to reposition, double-clicked to release them back to the physics simulation, and hovered to reveal tooltips with character names, group IDs, or link source/target/strength. The visualization uses SVG with animation, a categorical color scheme from d3-scale-chromatic, and a legend to map group colors.

Aalmsuarez
81% match
Loading thumbnail…

Force-Directed Graph V3

This example shows a force-directed network graph of character interactions from the novel Les Misérables. The visualization displays nodes as unlabeled circles and links as straight lines, with the layout computed dynamically through a physics simulation. Using D3 v6 within a React framework, the code applies `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the 17 nodes and 14 links. The SVG elements update their coordinates on each simulation tick, though the data only includes a subset of the full character relationships.

Sschneich
81% match
Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed graph with randomized links is rendered as a 100-node network partitioned into nine groups, with each group’s region shown via a Voronoi overlay. Hovering a Voronoi cell briefly highlights its nodes by enlarging them. The code uses `d3.forceSimulation` with link, charge, position, collision, and centering forces, runs 120 ticks manually, and draws SVG circles, lines, and Voronoi paths via `d3.voronoi`. Colors come from `d3.schemeCategory20`.

NNicocolabricot
81% match