Force-Directed Web Worker

100%

Force-Directed Web Worker

✓ Published0🌍 Public

Last edited Jan 21, 2017

Created on Apr 26, 2016

This example shows a force-directed graph of 1,000 nodes computed in a web worker, with a progress bar indicating the simulation’s tick rate. The main thread receives progress updates and renders the final layout on a Canvas using `getContext("2d")`. The layout is calculated with `d3.forceSimulation`, using `forceManyBody`, `forceLink`, and `forceX`/`forceY` forces in worker.js, which imports d3-force modules via `importScripts`.

AI-generated description

This example demonstrates how to compute a static force-directed graph layout using web workers.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force GIF

A force-directed graph of 1,000 nodes and 999 links is animated over 60 frames, showing how the layout evolves from an initial state into a stable configuration. Node positions are updated through repeated simulation ticks, with white nodes and gray links drawn on a black background using the Canvas API. The example uses `d3.forceSimulation` with a many-body charge force and a zero-distance link force, rendered via node canvas buffers and assembled into GIFs with ImageMagick and gifsicle. Two versions compare D3 v3’s `d3.layout.force` with the newer modular `d3-force` API.

Mmbostock

78% match

Loading thumbnail…

Force-Directed Tree

A force-directed tree renders 1,000 procedurally generated nodes connected in a hierarchical link pattern, with a force simulation continuously repositioning them. The code uses `d3.forceSimulation` with charge, link, x, and y forces to drive the layout, while drawing to a Canvas 2D context. Nodes appear as small filled circles, and links are stroked lines in gray, with the entire scene offset to the canvas center. Interactive dragging is enabled via `d3.drag`, letting users pull any node and observe the layout rebalance in real time.

Mmbostock

77% match

Loading thumbnail…

D3 Force Simulation

A force-directed network of 100 nodes and 300 randomly generated links settles into a stable layout under a centering force, many-body repulsion, link distance constraints, and collision avoidance. The visualization uses D3 v4's `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCollide` to animate the physics, while nodes are draggable via D3's drag interaction. The simulation updates an SVG canvas on each tick, redrawing lines and circles as positions change. The random data is generated programmatically, creating an abstract, interactive demonstration of force-based layout.

CCarlosACalvo

77% match

Loading thumbnail…

Force Layout with Canvas

This example shows a force-directed graph rendered on a canvas element instead of in SVG, using d3.layout.force to compute the layout and the Canvas 2D API’s `getContext` and `arc` for drawing. The graph loads node and link data from a local `graph.json` file, with nodes drawn as steelblue circles and links as gray lines. The simulation runs continuously, updating the canvas on each tick event by clearing the frame and redrawing the nodes and links. Unlike the SVG version, nodes are not draggable, but the canvas approach offers modest performance improvements.

Mmbostock

77% match

Loading thumbnail…

Fork of Canvas Force Tutorial

This example shows a force-directed network graph built from a CSV file of names and connection weights, rendered as circles and lines on an HTML5 Canvas. It uses d3.forceSimulation with forceX, forceY, forceCollide, forceManyBody, and forceLink to position the nodes, updating the canvas on each simulation tick via the `ctx` drawing context. The visualization reads data.csv asynchronously with d3.csv, constructs the node and link arrays, and then starts the simulation, with node radius fixed at 7 pixels.

Hherbertamakloe

77% match

Loading thumbnail…

D3 Force Simulation

A force-directed network layout visualizes 100 nodes and 300 random links, rendered as circles and lines in an SVG canvas. The example uses D3 v4’s `d3.forceSimulation` with `forceCenter`, `forceManyBody`, `forceLink`, and `forceCollide` forces to compute positions. Nodes are draggable via `d3.drag`, which updates fixed positions (`fx`, `fy`) during interaction. The animation updates node coordinates and link endpoints on each simulation tick.

CCarlosACalvo

77% match

Loading thumbnail…

Fork of Canvas Force Tutorial

This example visualizes a force-directed network of people and their weighted connections. It uses D3 v5’s `d3.forceSimulation` with `forceLink`, `forceX`, `forceY`, `forceCollide`, and `forceManyBody` to position nodes, and renders the graph on a Canvas element via the 2D context’s `arc`, `moveTo`, and `lineTo` methods. Data is loaded from a CSV file specifying source, target, and weight. The simulation updates the drawing on each tick, producing an animated, interactive layout.

Rrayhindman

76% match

Loading thumbnail…

Gist d1c4aa87fcfefde869f59c98b73ef3fb

This example uses a custom physics simulation to render a network of nodes and links, with each node’s position updated iteratively and drawn as a smooth curve. The code relies on `d3.forceSimulation` and `d3.forceLink` to compute forces, while custom `requestAnimationFrame` loops and `canvas` paths render the animated edges. The data appears to be generated randomly, with no external dataset, and the visualization emphasizes the evolving structure of the simulated graph over time.

11wheel

76% match