Force-Directed Layout (Multiple Foci)

Multi-Foci Force Layout

A multi-foci force layout arranges 200 nodes into 10 distinct color-coded clusters, each pulled toward its own focal point along the horizontal axis. The visualization uses a custom gravity function to move nodes toward cluster centers and a collision detection routine built on a quadtree to prevent overlapping circles. Rendered as SVG with D3 v3, the code employs `d3.layout.force`, `d3.scale.ordinal` for focal positions, and `d3.geom.quadtree` for efficient proximity checks, with node radii derived from a logarithmic distribution.

89% match

Multi-Foci Force Layout

A multi-foci force layout clusters 100 circles into four groups using D3’s d3.layout.force with position Verlet integration. Custom forces push nodes up, down, and sideways based on their index, while d3.event and force.drag enable mouse interaction. Clicking the page perturbs node positions with random offsets, and the simulation resumes. SVG circles render with a categorical color scale and animate smoothly via the tick event.

88% match

Multi-Foci Force Layout

Five fixed nodes serve as force foci that attract and repel moving nodes in a 2D space. As the mouse moves, the user spawns new nodes with random radii and colors; these nodes are pulled toward a focus matching their type while colliding with each other via a quadtree. The simulation runs on D3 v3’s force layout with custom attraction and collision logic, rendering everything as SVG circles with animated transitions that remove nodes after three seconds. The `d3.layout.force` API drives the physics, and `d3.geom.quadtree` accelerates collision detection.

85% match

Multi-Foci Force Layout

A stream of circles enters the scene at regular intervals, each assigned one of three focal points. The circles gravitate toward their assigned focus, creating three distinct clusters that shift as new nodes are added and older ones settle. Using D3 v3’s `d3.layout.force`, the example overrides the default tick handler to manually steer each node toward its focus, with the simulation’s alpha value controlling the easing. The SVG circles are colored via a categorical scale based on their focal point ID, and the animation runs indefinitely via `setInterval`.

Force-Directed Layout with Convex Hull

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.

FFrissAnalytics

Force Layouts - Quantitative Foci

This example demonstrates a force-directed layout with radial foci, where mouse movement generates nodes that are attracted to invisible rings around the center. Node color encodes the ring’s squared radius using a linear color scale. The code uses d3.layout.force, svg selection of circles, and d3.svg.mouse to add nodes, while the tick handler steers each node toward its assigned ring distance. A transition shrinks nodes after three seconds and removes them from the array, creating a continuous particle stream. The work is derived from an earlier quantitative-foci example by Mike Bostock.

GGerHobbelt

Force Layouts - Quantitative Foci

This example demonstrates a dynamic force-directed layout where nodes are created by mouse movement, each with a vertical target position and color based on its height. As the simulation runs, nodes transition toward their assigned horizontal positions, creating a flowing ribbon-like stream of circles. Built with d3.v2, the code uses `d3.layout.force`, `d3.scale.linear` with `d3.interpolateHsl` for color mapping, and svg transitions with a delay to remove nodes after a set time. The animation shows nodes moving continuously, simulating a particle system with a quantitative focus based on their y-coordinate.

GGerHobbelt