Navigate and Zoom around graph

100%

Navigate and Zoom around graph

✓ Published0🌍 Public

Last edited Sep 30, 2018

Created on May 14, 2017

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.

AI-generated description

See SO answer.

You can pan (click background), zoom (mousewheel), drag nodes around. Middle click to add more nodes (at mouse).

forked from <a href='http://bl.ocks.org/TWiStErRob/'>TWiStErRob</a>'s block: <a href='http://bl.ocks.org/TWiStErRob/b1c62730e01fe33baa2dea0d0aa29359'>Zoom to fit</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Navigate and Zoom around graph

This example demonstrates an interactive graph visualization that users can navigate by panning across the background, zooming with the mousewheel, and dragging individual nodes. A force-directed layout, powered by `d3.layout.force`, positions and animates the nodes and links, with SVG rendering for all elements. Middle-clicking on the background adds new nodes at the cursor’s location, while buttons freeze, thaw, or fit the entire graph to the viewport. The zoom behavior uses `d3.behavior.zoom`, and the fit function computes the graph’s bounding box via `getBBox` to adjust the view transform.

FFrissAnalytics

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

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

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

85% match

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

82% match

Loading thumbnail…

D3 Selectable Force-Directed Graph

This interactive D3 visualization demonstrates a force-directed network graph where nodes can be repositioned through dragging. Users can select multiple nodes using shift-click or by drawing a selection rectangle, enabling simultaneous movement of grouped nodes. The graph renders as an SVG using d3.forceSimulation, with selection semantics similar to window managers: clicking a node selects it exclusively, while shift-clicking toggles individual nodes. The implementation includes a zooming behavior via a custom d3.svg.brush for rectangular selection and a zoomer for scaling and panning the entire graph.

FFrissAnalytics

82% match

Loading thumbnail…

Force layout on canvas with zoom/pan and drag

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.

FFrissAnalytics

81% match

Loading thumbnail…

Gist 6db8115f185f7e57cb4395da0474fbf6

This example presents an interactive visualization of a network graph, where nodes are connected by curved links and can be dragged by the user. The code builds the layout using `d3.forceSimulation` for physics-based positioning and renders the scene with `d3.select` and SVG elements, including `transition.attrTween` for smooth link animations. It reads a JSON dataset of node and edge data from an external file, and uses `d3.zoom` for panning and scaling the view. The visualization shows how force-directed algorithms distribute connected nodes while user input adjusts the simulation in real time.

11wheel

81% match