Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
FFrissAnalytics
Last edited Nov 26, 2016
Created on Nov 26, 2016

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.

AI-generated description

Force directed Graph with:

  1. Dragable nodes
  2. Zoom and pan (with maximum effective-size limit for zoomed elements)
  3. Double-click to center node
  4. Resizable window (with zoom/pan-aware relocation of center of gravity)
  5. Text labels (which are not occluded by nodes; flag to set centered/offset)
  6. Properties determine node size and shape, and node and link colors (with default values; flag to set fill/outline).
  7. Filter nodes by shape (c,d,r,s,t,x), by score (l,h,m), if orphan (0), and filter links by score (1,2,3)
  8. Hover to highlight 1st-order neighborhood. Click to fade surroundings
  9. Read graph from json file

forked from <a href='http://bl.ocks.org/eyaler/'>eyaler</a>'s block: <a href='http://bl.ocks.org/eyaler/10586116'>Force-Directed Graph with Drag/Zoom/Pan/Center/Resize/Labels/Shapes/Filter/Highlight</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
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
87% 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
85% 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
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
84% 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
84% match
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
83% match
Loading thumbnail…

Force Directed Graph

This visualization presents a network of interconnected nodes, with each node colored by its assigned group and links showing the connections between them. It combines a force-directed node-link diagram with an adjacency matrix display, revealing both the spatial clustering of relationships and the overall network structure. The force layout is built with `d3.forceSimulation`, including `d3.forceLink` and `d3.forceManyBody`, while user interactions like node dragging, zooming, and hover effects are handled through D3’s drag and zoom APIs. The adjacency matrix uses `d3.scaleBand` axes to map node IDs, and both SVG canvases render the data with animation driven by the simulation tick events.

ZZhou180
83% match