Skip to main content
SimilarExport ZIP
100%

Force Directed Graph

✓ Published1🌍 Public
Ppierre-reibel
Last edited Sep 9, 2020
Created on Sep 9, 2020
Forked from React Starter

An interactive force-directed graph visualizes the relationships between Facebook, Inc. and Volkswagen Group and their subsidiaries, with nodes connected by curved, orange paths. The graph uses `d3.forceSimulation` with link, charge, and centering forces to position the nodes, and node size and fill color reflect the number of connections per node. Dashed, thicker gray-orange links indicate a zero-value relationship, and the nodes support drag interactions via `d3.drag`. The visualization is rendered as an SVG, with labels displayed beside each node.

AI-generated description

First graph.

MIT Licensed

Similar vizzes

Loading thumbnail…

Force Directed Graph

A force-directed graph maps parent companies to their subsidiary brands, using curved links and labeled circular nodes. The visualization shows relationships like Facebook, Inc. connecting to Instagram and WhatsApp, with dashed coral lines distinguishing weaker connections. Built with d3.forceSimulation, the layout applies forceLink, forceCenter, and forceManyBody to position nodes dynamically. Node size and blue color intensity reflect link count, computed via path filtering. User interaction is supported through d3.drag, while tick updates redraw curved SVG paths. Data is embedded directly in the code as link and node objects.

Gguinessjulie
88% match
Loading thumbnail…

Force

This visualization shows a force-directed network graph of social connections from the Caltech36 Facebook dataset, rendered as SVG circles and lines. The simulation uses `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceLink` to position nodes colored with a rainbow sequential scale. The code loads node and link data from a local JSON file, then applies ticked updates to redraw node positions and link endpoints as the layout stabilizes.

Vvivianaaai@qq.com
82% match
Loading thumbnail…

Viz of facebook relations

This example visualizes Facebook relationships using a combined force-directed graph and adjacency matrix. The left panel shows a network of nodes connected by links, built with `d3.forceSimulation`, while the right panel displays a grid representing the adjacency matrix, where each cell’s fill opacity reflects link weight. Clicking a node in the graph or a grid cell highlights the corresponding link in both views, using D3’s selection and event handling. Data comes from an external CSV edges file, and the visualization renders with SVG.

EELBOUNIAmine
81% match
Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes relationships among nodes in a network, with circle size reflecting group membership and link thickness indicating connection weight. The example loads CSV data from an external source and renders an interactive SVG where users can drag nodes, zoom, and click to highlight connected rows and columns in an accompanying adjacency matrix. It uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for layout, with `d3.drag` and `d3.zoom` for interaction. The code also employs `d3.csv` for data parsing and builds the matrix using SVG rectangles and text elements.

Cchungmin-yu
79% 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
79% 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
79% match
Loading thumbnail…

Vis of facebook relations

This visualization displays a Facebook social network using two coordinated views: an adjacency matrix showing connections between users, and a force-directed node-link diagram. The matrix uses colored cells to indicate relationships, while the network graph reveals community structure through node coloring based on degree centrality. Built with D3 v5, the visualization employs `d3.forceSimulation` for layout and `d3.forceLink` for edge positioning. Users can zoom and pan the network view, while clicking nodes or matrix cells logs their identity. The underlying data is loaded from a TSV file listing Facebook friend pairs.

EELBOUNIAmine
79% match
Loading thumbnail…

Force Directed Graph

This visualization combines a force-directed node-link diagram with an adjacency matrix to show the connections and community structure in a social network. The node-link diagram uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, which can be dragged and zoomed. Clicking a node or a matrix cell highlights the corresponding row and column in the matrix and the connected links in the graph. The adjacency matrix uses custom `rect` elements to represent edge weights, with colors mapping to node groups.

JJasonYeong0821
79% match