Skip to main content
SimilarExport ZIP
100%

Erdős–Rényi Force Directed Graph

✓ Published0🌍 Public
FFrissAnalytics
Last edited Oct 1, 2018
Created on Dec 8, 2016

This visualization shows an Erdős–Rényi random graph, where nodes are placed along an Archimedean spiral and edges appear based on a user-controlled probability. Red nodes are those with no connections, and the number on each node displays its degree. Built with D3 v2’s force layout, the example uses SVG text and lines for rendering, with a dat.GUI panel to adjust node count, link probability, and force parameters like charge and gravity. A mousewheel zoom control also changes the node count dynamically.

AI-generated description

Created by Christopher Manning

Summary

This creates a graph with the number of nodes you specify and random edges based on the probability selected. The number indicates how many edges are connected to that node. Red nodes are not connected to any other nodes.

Inspired by this tweet from @ChicagoCDO

Nodes are added to the graph along the path of an Archimedean spiral. This is more pleasing than adding nodes at random locations. This also prevents new nodes from chaotically bouncing around since now they are always placed at a reasonable distance from each other.

Controls

  • Use the mousewheel to increase or decrease the number of nodes.

References

forked from <a href='http://bl.ocks.org/christophermanning/'>christophermanning</a>'s block: <a href='http://bl.ocks.org/christophermanning/4187201'>Erdős–Rényi Force Directed Graph</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Random Graph Generator

This interactive visualization generates a random graph with 80 nodes and 80 links each time the user clicks the canvas. The nodes are sized and colored according to their degree (number of neighbors), using an ordinal color scale mapped from a blue-to-red gradient. The graph is laid out using the d3.layout.force force-directed algorithm, which animates the nodes and links as they settle into position. The implementation uses D3.js (v3) with SVG circles and lines, and each new graph replaces the previous one through transitions that adjust node radius, fill color, and opacity over 800 milliseconds.

MMNoichl
76% match
Loading thumbnail…

Force Directed Graph

This visualization pairs a force-directed graph with an adjacency matrix to explore network structure. Clicking a node in the graph or a cell in the matrix highlights the corresponding node and its edges in red. The graph uses `d3.forceSimulation` with link, charge, and center forces, supports dragging and zooming, and the matrix can be reordered by name, degree, or an optimal leaf ordering from the `reorder.js` library. Both views render to SVG, using data from the infect-dublin.edges file.

Hhenry8966
76% match
Loading thumbnail…

Force Directed Graph

This interactive visualization pairs a force-directed graph with an adjacency matrix, allowing users to explore relationships between nodes in a network. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. Built with D3 v6, the graph uses `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, with drag and zoom interactions enabled. The adjacency matrix is rendered as SVG rectangles, with fill opacity representing edge weights. Data comes from a custom edge list file, and node colors correspond to categorical groups.

Wwinniepooh520
75% match
Loading thumbnail…

D3 v4 - force layout

This example shows a force-directed graph with 100 randomly generated nodes and links, rendered as SVG circles and lines. The code builds the network using `d3.forceSimulation` with forces for link distance, collision, charge, centering, and X/Y positioning, then updates node and link positions on each tick. Nodes are draggable via `d3.drag`, and drag events adjust the simulation’s alpha target to restart or settle movement. The data is synthesized in the script, and the visualization initializes from a blockbuilder.org fork.

FFrissAnalytics
75% match
Loading thumbnail…

ForceDirectedGraph

This example visualizes a small directed graph with six interlinked nodes and weighted edges, rendering nodes as colored circles with labels and links as lines whose thickness reflects edge weight. The visualization uses D3.js v3’s force layout (`d3.layout.force`) to position nodes, with link distance driven by edge weight and a collision detection function to prevent overlap. Node colors, sizes, and stroke styles come from the dataset, while hover titles expose metadata. The SVG is created and updated on each force tick, and edges optionally display arrow markers for directionality when configured.

Rrimi-299
75% match
Loading thumbnail…

D3 Force-Directed Graph

This example demonstrates a force-directed network layout, visualizing a small set of nodes and their connections with interactive dragging. The graph dynamically arranges connected circles using a physics simulation, cleanly separating linked nodes while repelling them from one another. The visualization is built with D3 v7, using `d3.forceSimulation` together with its `forceLink`, `forceManyBody`, and `forceCenter` components. The SVG output renders nodes as circles with labels and edges as straight lines, with positions updated on each simulation tick. The code also includes a guard that filters out any edges referencing non-existent nodes, ensuring the structure remains valid.

KKhanin Sisaengsuwanchai
74% match
Loading thumbnail…

Force Directed Graph

A force-directed graph of 410 connected nodes is shown alongside an adjacency matrix, letting users explore network structure through either view. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. The layout uses d3.forceSimulation with forceLink and forceManyBody, rendered as SVG circles and lines, with a zoom transform applied to both. The adjacency matrix is built from the same edge data, and hover effects use dynamically updated stroke colors and widths.

Aa04775
74% 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
74% match