Skip to main content
SimilarExport ZIP
100%

Zoomable Force Directed Graph d3v4

✓ Published0🌍 Public
TThanaporn-sk
Last edited Apr 22, 2017
Created on Apr 22, 2017

This graph displays a network of characters with ally and enemy connections, visualized as a zoomable, force-directed layout. The nodes represent individuals, while the links indicate relationships labeled by type. The implementation uses the D3 v4 library and its `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` APIs to handle the physics and layout. The SVG rendering supports interactive zooming and dragging, with node and link styling defined in CSS. Data is provided as static arrays within the code.

AI-generated description

This graph combines force directed graphs, zooming and dragging, and the explanation behind the graph is available here.

forked from <a href='http://bl.ocks.org/puzzler10/'>puzzler10</a>'s block: <a href='http://bl.ocks.org/puzzler10/4438752bb93f45dc5ad5214efaa12e4a'>Zoomable Force Directed Graph d3v4</a>

mit Licensed

Similar vizzes

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

Fork of D3 Forces - ZOOM

This example shows a small directed graph with two nodes and one link, rendered as SVG shapes whose positions are driven by D3's force simulation. It demonstrates zooming and panning interactions, along with different node styles (gray and green circles) and a thick link line. The code is implemented using `d3.forceSimulation`, `forceManyBody`, `forceCenter`, `forceLink`, `drag`, `zoom`, and `symbol` from D3 v3, with data defined in `data.js` and the graph logic in `forceGraph.js`.

Rrobinjohn.inc@gmail.com
85% match
Loading thumbnail…

Force Directed Graph

A force-directed graph displays a network of 410 nodes and their connections, with node colors assigned by group via `d3.schemeCategory10`. The visualization pairs the graph with an adjacency matrix rendered as SVG rectangles, where users can click either nodes or grid cells to highlight corresponding links and matrix positions. Built with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, the graph supports drag-and-drop node repositioning and zoom/pan interactions through `d3.zoom`. The adjacency matrix uses `d3.select` to update stroke and fill opacity based on edge weights.

WWei-Che Chang
84% match
Loading thumbnail…

Force Directed Graph

This visualization employs a force-directed graph to display a dataset of 410 linked nodes, loaded from a TSV file. The d3-force simulation, using `forceSimulation`, `forceLink`, and `forceManyBody`, positions the nodes with link thickness proportional to edge weight. Nodes are colored by a group value, and interactive dragging with `d3.drag` and zooming with `d3.zoom` are enabled. A separate, non-interactive adjacency matrix, built with `d3.select` and `reorder`, is shown but not linked to the graph.

Aa04775
84% match
Loading thumbnail…

Force Directed Graph

This example combines a force-directed graph with an adjacency matrix to visualize network data. The code reads a small dataset of nodes and links, rendering the graph as SVG circles and lines using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`. Users can drag nodes and apply zoom via `d3.zoom`. Clicking a node highlights its corresponding row and column in the adjacency matrix, which is built with D3 selections and `rect` elements. The visualization uses a color scale for node groups and includes a dropdown to order matrix rows.

Yyptang5488
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
Loading thumbnail…

Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to explore network structure. The graph layout is computed using `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` forces, and users can drag nodes or zoom via `d3.zoom`. Clicking a node highlights its corresponding row and column in the matrix, and clicking a matrix cell highlights the linked edge. Node colors encode group membership, while edge thickness reflects link weight.

Wwinniepooh520
82% match
Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes node-link relationships alongside an adjacency matrix, with both views linked by highlighting a selected node’s row and column on hover or click. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables interactive repositioning and `d3.zoom` supports scaling. Links are colored by group, and matrix cells reflect edge weights via fill opacity, with data loaded from CSV text.

TThe-World-Muda
82% match