Skip to main content
100%

Spherical Force-Directed Layout

✓ Published0🌍 Public
AAjayyy
Last edited Jul 1, 2018
Created on Jul 1, 2018

This example shows a force-directed graph whose nodes and links are wrapped onto a sphere, with the sphere’s rotation controlled by drag. The layout uses D3’s force simulation (`d3.layout.force`) to position nodes, while each node and link is rendered as an SVG path transformed by a geo projection (`d3.geo.path`). The interface, built with dat.GUI, lets users switch among projections (e.g., Orthographic, Mercator) and adjust force parameters (link strength, distance, gravity) in real time.

AI-generated description

Created by Christopher Manning

Summary

Draws a force directed graph using svg:path and geo projections onto a sphere.

TODO

  • Make links in rectangular projection wraparound
  • Fix node replusion in azimuthal projections
  • Fix node dragging in azimuthal projections

References

forked from <a href='http://bl.ocks.org/christophermanning/'>christophermanning</a>'s block: <a href='http://bl.ocks.org/christophermanning/4208494'>Spherical Force-Directed Layout</a>

forked from <a href='http://bl.ocks.org/sandravizmad/'>sandravizmad</a>'s block: <a href='http://bl.ocks.org/sandravizmad/ac3154b87b9dbca0c1f9518f45f095fa'>Spherical Force-Directed Layout</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Spherical Force-Directed Layout

A force-directed graph of 100 nodes and their links is projected onto a sphere using D3 v3’s `d3.geo.path` and a selectable geo projection (e.g., orthographic, mercator). The force layout positions nodes in 3D spherical space, and the SVG paths render the resulting network, with node colors from a categorical scale. A dat.GUI panel lets users switch projections, toggle clipping, and adjust force parameters like link distance and charge. Dragging rotates the projection instead of moving nodes.

Aaltocumulus
93% match
Loading thumbnail…

How to D3 Force Directed Layout Graph

This example demonstrates a force-directed layout graph using D3.js (v5). Nodes and links are rendered as SVG elements, with the graph's structure implied by the bundled JavaScript. The code uses D3’s built-in force simulation (d3.forceSimulation) to position the connected nodes naturally, while the stylesheet defines the visual appearance of the nodes as grey circles and the links as grey lines. The data is not explicitly shown, but the layout emerges from the simulated forces between connected nodes.

Iisaachowen
83% match
Loading thumbnail…

D3 v4 - force layout

This example demonstrates a force-directed graph layout using D3 v4's physical simulation API. The visualization shows 100 labeled nodes connected by random links, with node sizes varying between 8 and 28 pixels. The simulation applies multiple forces—link attraction, collision avoidance, many-body repulsion, and centering—to position the nodes dynamically. Dragging nodes with the mouse temporarily restarts the simulation with higher alpha, allowing interactive manipulation of the network. The code uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceCollide`, `d3.forceManyBody`, and `d3.drag` to render SVG circles and lines, updating positions on each simulation tick.

SSafiMohammed
82% match
Loading thumbnail…

Force Layout

This example demonstrates an interactive force-directed graph built with React and D3 v6. A hierarchical dataset is flattened into nodes and links, then rendered as circles and lines using SVG. The simulation uses `d3.forceSimulation` with center, charge, collide, and link forces. Moving the mouse dynamically adds `forceX` and `forceY` forces that pull nodes toward the pointer, with strength varying by node depth. Clicking applies a `forceRadial` orbit force around the clicked point and draws a green circle to indicate the orbit radius.

MMinwoo Pak
82% match
Loading thumbnail…

D3 v4 - force layout

This example demonstrates a force-directed network layout of 100 nodes and 100 links, rendered as animated SVG circles and lines. The visualization uses d3.forceSimulation with forces for link attraction, collision detection, many-body repulsion, centering, and x/y positioning. Users can drag nodes within the 900×500 pixel graph area, with the simulation’s alpha target adjusting during interaction. The layout updates every tick, repositioning nodes and links based on the simulation state.

Xxsg13
82% match
Loading thumbnail…

D3 v4 - force layout

This example shows a force-directed graph with 100 randomly generated nodes and links, rendered as SVG circles and lines. The code builds the network using `d3.forceSimulation` with forces for link distance, collision, charge, centering, and X/Y positioning, then updates node and link positions on each tick. Nodes are draggable via `d3.drag`, and drag events adjust the simulation’s alpha target to restart or settle movement. The data is synthesized in the script, and the visualization initializes from a blockbuilder.org fork.

FFrissAnalytics
82% match
Loading thumbnail…

Force Layout Example 1

This example demonstrates a minimal force-directed graph with five nodes and four links arranged in a branching structure, rendered as circles and lines in an SVG container. The code uses the D3.js v3 `d3.layout.force()` API to simulate the layout, with node positions and link distances updated after the simulation ends. It defines dimensions of 640x480 pixels, adds nodes and links as SVG elements before applying the force simulation, and sets a link distance based on half the canvas width. The visualization shows the basic mechanics of force layout without additional interaction or styling beyond grayscale fills.

SSputniza
82% match
Loading thumbnail…

D3 Force-Directed Graph

This example demonstrates a force-directed network layout, visualizing a small set of nodes and their connections with interactive dragging. The graph dynamically arranges connected circles using a physics simulation, cleanly separating linked nodes while repelling them from one another. The visualization is built with D3 v7, using `d3.forceSimulation` together with its `forceLink`, `forceManyBody`, and `forceCenter` components. The SVG output renders nodes as circles with labels and edges as straight lines, with positions updated on each simulation tick. The code also includes a guard that filters out any edges referencing non-existent nodes, ensuring the structure remains valid.

KKhanin Sisaengsuwanchai
81% match