Skip to main content
100%

D3v3 Force Layout with Minimum Convex Polygon

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

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.

AI-generated description

A quick example of a minimum convex polygon on a force layout (v3).

Based on this question here, which basically just adds Mike's example convex polygon block to a basic force layout.

I could not quite change the x and y accessor functions, so had to use an intermediate array of vertices.

Here is a d3v4 example.

Similar vizzes

Loading thumbnail…

D3v4 Force Layout with Covex Hull

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.

Aandrew-reid
89% match
Loading thumbnail…

(d3v4) Force Layout w highlights

This example shows a force-directed network graph of character interactions from *Les Misérables*, rendered as SVG nodes and links. Hovering over a node or link highlights its connections by fading unrelated elements, while a tooltip displays names, groups, and link strength. Dragging nodes repositions them, and double-clicking releases them from the fixed position. The visualization uses d3.forceSimulation with link, charge, and center forces, plus d3.drag for interaction and d3.schemeSet3 for coloring nodes by group.

FFrissAnalytics
79% 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
79% match
Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout places 100 randomly generated nodes into nine groups, each node with a random radius and connections to a few peers. The visualization displays these nodes as colored circles with black links, overlaid by a Voronoi diagram that partitions the canvas into convex hulls around each node. Hovering over a cell highlights it in red and briefly enlarges the corresponding node. The code uses `d3.forceSimulation` with force functions for links, many-body repulsion, positioning, collision, and centering, running 120 simulation ticks before rendering the Voronoi polygons and SVG elements.

BBaptisteL54
79% match
Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed network diagram positions 150 nodes into nine distinct groups, with each node colored by group membership. The visualization overlays a Voronoi tessellation—computed using `d3.voronoi`—on top of the node positions, creating clickable cells that highlight adjacent nodes and connected links on mouseover. Randomly generated links between nodes are drawn as black lines, and hovering a Voronoi cell temporarily dims unrelated links while emphasizing those touching the hovered node. The layout uses `d3.forceSimulation` with charge, position, and collision forces, running 200 ticks before rendering static SVG circles and paths.

AArnaudBru
79% 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
79% 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
79% match
Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout positions 100 randomly generated nodes into 30 groups using a simulation from the d3.forceSimulation API, with forces for charge, collision, and x/y anchoring. The nodes are grouped by index modulo 30, and a Voronoi partition, created via d3.voronoi, draws convex hull-like polygons around each node’s cell in red on mouseover. The SVG output animates over 120 simulation ticks, filling each polygon white and outlining it in black, with node colors assigned from d3.schemeCategory20. The data is procedurally generated, not from an external source, and rendered entirely in the browser.

CCtuauden
78% match