Force Directed Network Graph

100%

Force Directed Network Graph

✓ Published0🌍 Public

Last edited Aug 14, 2023

Created on Aug 13, 2023

This example shows a force-directed network graph representing companies and the connections between them. It visualizes companies as circular nodes with labels, linked by lines to show relationships. The data is loaded from `companies.json` using `d3.json`. The graph is rendered as an SVG using D3 v6, with the layout computed by `d3.forceSimulation`, which combines `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Node icons and sector information exist in the data but are not displayed in this rendering.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

D3 Network Graph

This example shows an interactive network graph of company ownership links, with labeled nodes positioned through a force-directed simulation. It uses D3 version 6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute node positions, while `d3.drag` enables dragging nodes. The SVG rendering draws gray lines for links and circles with labels for nodes, with data structured as nodes and links from a dataset containing company records and weighted ownership connections.

RRajath Gowda

84% match

Loading thumbnail…

Untitled

This example visualizes a network of company directors and enterprises as a force-directed graph. Nodes represent individuals (labeled “dirigeant”) and companies (identified by French SIREN numbers), with links drawn between them to show relationships. The visualization uses d3.forceSimulation to compute node positions, updating the canvas on each tick via d3.drag for interactive node manipulation. Rendering is performed using the Canvas 2D API, where links are drawn as lines and nodes as circles. Data is loaded from a local JSON file.

NNathannous

82% match

Loading thumbnail…

Network

This example shows a force-directed network of eight major tech companies, with nodes colored by industry sector—software, hardware, e-commerce, and cloud/AI—and links styled by relationship type: solid teal for partnerships, dashed yellow for competition, and pale green for collaboration. The visualization uses D3’s `d3.forceSimulation` to position nodes and render SVG links and circles, with hover highlighting and a fixed tooltip showing details. Data is hardcoded as arrays of node and link objects, and the layout is drawn entirely in scalable SVG within a fixed 1100×700 viewBox.

AAnurup Reddy

82% match

Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This interactive graph illustrates the network of connections between the Kenneth Rainin Foundation and its related organizations. Using D3.js v6, it constructs a force-directed layout with `d3.forceSimulation` and applies `forceLink` and `forceManyBody` physics to position nodes. Nodes are sized by hierarchy level (main, child, leaf) and colored by sector from a predefined palette. The data comes from a local `companies.json` file, which is loaded via `d3.json`, and includes company names, sectors, and optional icon URLs. The visualization renders as SVG, with lines representing links and circles for nodes.

DDarren Kay

81% match

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

81% match

Loading thumbnail…

Organization Network Graph

This example shows a force-directed network of organizations, distinguishing three node types—main, sub, and anonymous—by size and color, as loaded from CSV edge and node attribute files. It uses React with D3’s `forceSimulation` (including `forceCenter`, `forceManyBody`, `forceCollide`, and `forceLink`) to compute layout positions, and renders nodes as SVG circles with labels, with edges colored to match their source main organization. The graph supports dragging nodes to reposition them within the simulation.

MMinwoo Pak

80% match

Loading thumbnail…

Force-Directed Graph

This is a force-directed graph visualization rendered as an SVG, showing three nodes and three links in a small network. The node and link positions are determined by a physical simulation where nodes repel each other and links pull connected nodes together. The code uses `d3.forceSimulation` to combine `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, updating SVG circle and line elements on each simulation tick. The data comes from a local JSON file with node IDs and link source/target references.

Ttkcj0912

80% match

Loading thumbnail…

Organization Connection Graph

This force-directed graph maps connections between people and companies, derived from board membership data. Each node represents a person or organization, with edges indicating relationships like board membership or personal meetings. The visualization uses D3 version 7’s `forceSimulation` engine, combining `forceManyBody` for repulsion, `forceLink` for edge constraints, and `forceCenter` to keep the layout anchored. Interactive dragging is enabled through a custom `drag` interaction, while circles, text labels, and lines are rendered as SVG elements.

JJoanna Szpadkiewicz

80% match