Force layout on canvas with zoom/pan and drag

100%

Force layout on canvas with zoom/pan and drag

✓ Published0🌍 Public

Last edited Mar 6, 2020

Created on Mar 6, 2020

A black canvas displays a force-directed network of small white nodes with red exceptions, connected by white edges. The example uses D3 v4 and d3-force v1, with d3.forceSimulation managing the layout. Users can pan, zoom, and drag nodes via d3.zoom and d3.drag, with all rendering performed directly on the canvas 2D context. Node positions update on each simulation tick, and the graph is drawn from a local data.json file.

AI-generated description

Influenced mostly by http://bl.ocks.org/mbostock/d1f7b58631e71fbf9c568345ee04a60e

forked from <a href='http://bl.ocks.org/jodyphelan/'>jodyphelan</a>'s block: <a href='http://bl.ocks.org/jodyphelan/5dc989637045a0f48418101423378fbd'>Force layout on canvas with zoom/pan and drag</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Force layout on canvas with zoom/pan and drag

A force-directed network layout renders nodes and edges on a canvas with zoom, pan, and drag interactions. The visualization uses `d3.forceSimulation` to position nodes based on charge, link, and centering forces, while `d3.zoom` and `d3.drag` handle transformations and node fixation. Data comes from a local `data.json` file containing node IDs and links. Nodes are drawn as circles, with one node colored red via a custom `col` property, on a black background.

FFrissAnalytics

96% match

Loading thumbnail…

canvas + drag + zoom + fixed nodes

This example shows a force-directed network graph rendered on a canvas, where nodes settle into a fixed layout once the simulation ends. Users can drag individual nodes and zoom or pan the entire visualization with the mouse. The code uses D3 v4’s d3.forceSimulation with charge, link, and centering forces, and handles canvas rendering through the 2D context with transform scaling and translation. Node and edge data are loaded from an external JSON file, with pre-defined edge connections.

FFrissAnalytics

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

85% match

Loading thumbnail…

Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight

This interactive force-directed graph displays network data with draggable nodes, zoom and pan controls, and double-click-to-center functionality. Nodes vary in size, shape, and color based on properties like score and type, with text labels that avoid occlusion. The visualization supports filtering by node shape, score, and link strength, plus hover highlighting of first-order neighborhoods and click-to-fade effects. Built with D3 v3, it uses d3.layout.force for simulation and d3.behavior.zoom, rendering as SVG with data loaded from a JSON file.

FFrissAnalytics

84% match

Loading thumbnail…

zoomable, draggable force layout with labels

This interactive force-directed graph displays ten labeled nodes (A through J) connected by links, with Font Awesome icons as labels overlaid on colored circles. The layout uses D3 v4’s `d3.forceSimulation` for physics-based positioning, combined with `d3.drag` for node dragging and `d3.zoom` for canvas zoom and pan. Node positions are bounded within the SVG viewport, and an HTML slider controller adjusts an external value. The black background, custom fonts, and Bootstrap controls frame the visualization, which reads node and edge data from a local `data.json` file.

FFrissAnalytics

83% match

Loading thumbnail…

Zoomable Force Directed Graph d3v4

This graph uses a force-directed layout to arrange a network of named characters, with gray links showing relationships and black circles for nodes. Users can zoom and pan the entire visualization via mouse interactions. The example is built with d3.v4, using d3.forceSimulation with d3.forceLink and d3.forceManyBody, and renders to SVG. The node and link data are hardcoded in the script, with links flagged as allies or enemies.

FFrissAnalytics

82% match

Loading thumbnail…

Navigate and Zoom around graph

This interactive graph visualization uses a force-directed layout to arrange nodes connected by links. Users can pan by clicking the background, zoom with the mousewheel, and drag individual nodes. Middle-clicking a location adds a new node at that point. The d3.v3 library provides the force simulation, zoom behavior, and drag interactions, while nodes and links are rendered as SVG elements. The graph displays a network with labels on each node, and buttons allow freezing, thawing, or fitting the graph to the viewport.

FFrissAnalytics

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

81% match