JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <title>Canvas Network Graph with D3</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="networkCanvas"></canvas>

    <script>
        // Set up canvas and D3 simulation
        const canvas = document.getElementById('networkCanvas');
        const ctx = canvas.getContext('2d');
        const width = window.innerWidth;
        const height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;

        // Default repulsion and collision parameters
        let repulsionStrength = -30;
        let collisionRadius = 30;

        // Create a D3 force simulation with adjusted forces to avoid shaking
        const simulation = d3.forceSimulation()
            .force('charge', d3.forceManyBody().strength(repulsionStrength)) // Repulsion strength
            .force('link', d3.forceLink().id(d => d.id).distance(80)) // Link distance
            .force('center', d3.forceCenter(width / 2, height / 2))
            .force('collision', d3.forceCollide().radius(collisionRadius)); // Collision radius

        // Generate random graph data with more nodes and links
        const nodes = d3.range(100).map(i => ({ id: i }));
        const links = d3.range(200).map(() => ({
            source: nodes[Math.floor(Math.random() * nodes.length)],
            target: nodes[Math.floor(Math.random() * nodes.length)]
        }));

        // Create the nodes and links for the simulation
        const nodesSimulated = simulation.nodes(nodes);
            nodesSimulated.on('tick', render);

        simulation.force('link')
            .links(links);
            
            console.log(nodes)

        // Function to render nodes and links on the canvas
       ...