JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Large Multi-Level Directed Graph</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <canvas id="graphCanvas" width="1200" height="800"></canvas>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const canvas = document.getElementById("graphCanvas");
            const context = canvas.getContext("2d");
            const width = canvas.width;
            const height = canvas.height;

            // Generate a large number of nodes and links (hierarchical)
            const nodes = [];
            const links = [];
            const numLevels = 5;
            const nodesPerLevel = 6;

            // Create nodes
            for (let level = 0; level < numLevels; level++) {
                for (let i = 0; i < nodesPerLevel; i++) {
                    const id = `${String.fromCharCode(65 + level)}${i + 1}`;
                    nodes.push({ id, level });
                }
            }

            // Create links
            nodes.forEach((node, index) => {
                if (node.level < numLevels - 1) { // Avoid links beyond the last level
                    const nextLevelNodes = nodes.filter(n => n.level === node.level + 1);
                    nextLevelNodes.forEach(nextNode => {
                        links.push({ source: node.id, target: nextNode.id });
                    });
                }
            });

            // Force simulation with downward hierarchy
            const simulation = d3
                .forceSimulation(nodes)
                .force("link",...