Force-Directed Layout with Convex Hull

100%

Force-Directed Layout with Convex Hull

✓ Published0🌍 Public

Last edited Oct 1, 2018

Created on Dec 8, 2016

A force-directed layout arranges 100 nodes into four groups, each distinguished by color and encircled by a semi-transparent convex hull that updates live as the nodes move under simulated forces. The D3.js code nests nodes by group using `d3.nest()`, then draws the hulls by recomputing their paths with `d3.geom.hull` during the `force.on("tick")` callback. The SVG animation also supports dragging and re-randomizing positions to demonstrate the clustering.

AI-generated description

I have modified the force-multi-foci example to add a convex hull around each cluster of nodes.

I achieved this by using d3.nest() to create a new dataset of clusters containing the nodes in each cluster. Then in the tick() method I create and update the path element for each cluster in this dataset.

forked from <a href='http://bl.ocks.org/donaldh/'>donaldh</a>'s block: <a href='http://bl.ocks.org/donaldh/2920551'>force-multi-foci with convex hulls</a>

forked from <a href='http://bl.ocks.org/newsummit/'>newsummit</a>'s block: <a href='http://bl.ocks.org/newsummit/00336c9eb59ee956426d'>force-multi-foci with convex hulls</a>

mit Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Force-Directed Layout with Convex Hull

This example uses D3 v4 to generate 100 random nodes assigned to 9 groups, then applies a force-directed simulation with `d3.forceSimulation`, including link, charge, X/Y, collide, and center forces over 120 ticks. After simulation, a Voronoi partition is computed via `d3.voronoi`, and its polygons are drawn as SVG paths that fill white and briefly turn red on mouseenter. Nodes are rendered as circles colored by category using `d3.schemeCategory20`, with no links generated, focusing purely on spatial clustering and interactive hull highlighting.

CChmits

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

90% match

Loading thumbnail…

Force-Directed Layout with Convex Hull

This example shows 100 nodes grouped into nine clusters, each assigned a distinct color, with a Voronoi partition drawn over the simulated layout. The code uses d3.forceSimulation with forceX and forceY to position groups around a grid, plus d3.forceCollide to prevent overlaps, running 120 ticks before rendering. The Voronoi cells are computed with d3.voronoi and drawn as SVG paths, with a mouseenter effect that briefly highlights the corresponding cell in red. Nodes are rendered as circles using SVG, with links absent from the empty graph.

BBaptisteL54

89% match

Loading thumbnail…

Force-Directed Layout with Convex Hull

This example demonstrates a force-directed layout where 100 nodes are organized into nine groups and arranged into a circular pattern using three columns. A Voronoi partition, generated with `d3.voronoi()`, divides the SVG canvas into polygonal cells around each node, with hover interactions highlighting the corresponding polygon in red. The simulation runs for 120 ticks via `d3.forceSimulation()` with forces for x/y positioning, collision avoidance, and centering, while nodes are rendered as colored circles with varying radii. The visualization uses SVG paths and circles, with the Voronoi cells drawn as white-filled polygons that react to mouse events.

DDjokovalle

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

88% match

Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed simulation of one hundred nodes grouped into nine clusters reveals a structured layout, with a Voronoi partition drawn as convex hulls that separate the groups. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceX`, `forceY`, and `forceCollide` to position nodes, while `d3.voronoi` computes the polygon boundaries. The SVG rendering includes interactive highlighting on mouseenter, which temporarily enlarges nodes in the hovered partition.

CChmits

88% match

Loading thumbnail…

Force-Directed Layout with Convex Hull

A force-directed layout positions 100 randomly sized nodes into nine color-coded groups, with a small set of links connecting select pairs. The simulation runs 120 ticks using `d3.forceSimulation` with link, charge, x/y, collide, and center forces. A Voronoi partition, created with `d3.voronoi`, draws cell boundaries around the final node positions. Hovering over a cell briefly enlarges its white polygon and the contained node. The visualization is rendered as animated SVG using d3.v4.

CChmits

88% match