Navigate and Zoom around graph

100%

Navigate and Zoom around graph

✓ Published0🌍 Public

Last edited Sep 3, 2018

Created on Aug 25, 2018

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.

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

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

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

81% match

Loading thumbnail…

force graph with zoom and drag

This example demonstrates a force-directed graph that can be zoomed and dragged. A circle within an SVG group responds to mouse interaction, with the SVG changing its cursor style to indicate draggable zones. The visualization uses D3 v6 to create three separate SVG elements, applies a linear color scale mapping scores to colors like lime, yellow, and red, and employs a power scale for sizing nodes. A zoom effect is implemented via `d3.zoom()`, which updates the SVG’s transform attribute on zoom events.

Ssgzzhinde

81% match

Loading thumbnail…

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

FFrissAnalytics

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

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

79% match