Skip to main content
100%

Force Layout Oceanic Routing

✓ Published0🌍 Public
Aandrew-reid
Last edited Mar 16, 2017
Created on Mar 16, 2017

This example uses D3’s force simulation to compute animated ocean shipping routes between Lisbon, Luanda, and Colombo. A world map is drawn with a Mercator projection, and land masses are filled with a grid of fixed force nodes. Route waypoints are generated along straight-line paths between ports and connected with links; the simulation then lets these waypoints repel from land nodes, curving the routes around continents. Yellow lines visualize the force network during the simulation. After the simulation settles, a black cardinal spline is drawn through the waypoints and animated with a stroke-dashoffset transition to trace the final paths.

AI-generated description

The goal of this bl.ock is a basic proof of concept in using force-directed layouts to set paths.

The force does not always work on this layout, but one of the two should each time at a minimum.

All land has been covered in a regular grid of points, which are incorporated into the force simulation. The force runs for 100 iterations before drawing a final line. Each route is drawn along the shortest path between the end points, however, a number of points are added along the route (and a number over the start and end points). The points are linked together with force links. The new points are added to the force simulation and the simulation is started.

After 100 iterations, a splined line is drawn connecting the points that were added and then forced into a usually sea-only routing.

This simulation wouldn't be able to handle Lisbon to Colombo directly very well (the middle port is Luanda) as it's just a bit to indirect to achieve routinely with this approach.

Similar vizzes

Loading thumbnail…

ship4

This visualization animates ship routes on an equirectangular world map, tracing journeys as dashed red arcs between source and destination ports. The map displays land masses in gray with country boundaries outlined in white. Using a dataset of ship voyages, the animation cycles through 50 route pairs every 10 milliseconds, drawing each as a line with a stroke-dash animation that fades in and out over 2 seconds. Small circles mark the source and destination ports, fading in and out with the arcs. The visualization is built with D3 v3 and TopoJSON, rendering as SVG with animated transitions.

Aanojoual
73% 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
73% 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
73% 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
73% match
Loading thumbnail…

D3: Force layout

A force-directed network graph displays ten named nodes connected by thirteen edges, with each node rendered as a colored circle and edges as gray lines. The simulation uses the D3 v3 `d3.layout.force` API, configured with a link distance of 50 and a charge of -100, to position nodes dynamically within a 500 by 300 pixel SVG canvas. Node colors come from `d3.scale.category10()`, and drag interaction is enabled via `force.drag`. The visualization updates on each tick of the force simulation, which adjusts node coordinates and redraws the SVG elements accordingly.

Aaaizemberg
72% match
Loading thumbnail…

D3 Force Simulation

This example shows a force-directed network layout of 100 nodes and 300 randomly generated links, rendered as circles and lines in an SVG canvas. The visualization uses `d3.forceSimulation` with three forces: `d3.forceCenter` to pull nodes toward the middle, `d3.forceManyBody` with negative strength for repulsion, and `d3.forceLink` to maintain a 50-pixel link distance. The simulation runs continuously via a `tick` event, updating node positions and link coordinates each frame. Nodes are interactive through `d3.drag()`, allowing users to manually reposition them while the simulation responds.

TTamayoValencia
72% match
Loading thumbnail…

Directional Force Layout Diagram with node colouring

This interactive force-directed graph displays directional relationships from a CSV dataset, with nodes colored by a categorical scale and link opacity encoded by link value. Users can click nodes to enlarge them and their labels, or double-click to restore them. The visualization uses D3 v3’s `d3.layout.force` for the physics simulation and SVG rendering for the nodes, curved paths with arrow markers, and transitions on click events to animate the size changes.

RRestuta
72% match
Loading thumbnail…

Directional Force Layout Diagram with node colouring

This interactive graph displays a directional force layout diagram, visualizing the relationships between characters as node connections. The example builds on the basic and highlighting versions by coloring each circular node distinctly using a categorical color scale, while links have varying opacity based on their weight values from the `force.csv` data source. The D3.js code uses the `d3.layout.force` API to simulate the physics, animating the SVG paths and nodes. Users can click to enlarge nodes and text, or double-click to restore them.

Dd3noob
72% match