We are building a single-page web app in a single file: index.html.
 The app will use D3 (provided as d3.min.js) to create a force-directed graph with:
   - About 40 nodes in several clusters
   - Draggable nodes
   - Hover highlighting of neighbors
   - Zoom and pan

 Steps:
 1. We write an index.html file that includes:
    - A <style> tag for CSS
    - A <script> tag that loads d3.min.js (since it's already present)
    - A <script> tag for our own JavaScript code, which creates the graph.

 2. We'll generate a sample graph with 40 nodes and links. We can create several clusters by assigning groups to nodes and then linking nodes within the same group more densely.

 3. The D3 force simulation will be set up with:
    - forceLink for links
    - forceManyBody for node repulsion
    - forceCenter to center the graph

 4. We'll make nodes draggable by listening to drag events.

 5. For hover highlighting, we will:
    - On mouseover: highlight the node and its neighbors (change color, enlarge) and also highlight the links connected to that node (make them thicker, change color).
    - On mouseout: revert the styles.

 6. We'll add zoom and pan by using d3.zoom and applying the transform to the main SVG group.

 Implementation plan in index.html:

   - The HTML structure: an SVG container for the graph.
   - The JavaScript code will:
        * Set up the SVG and zoom.
        * Define the force simulation.
        * Add links and nodes.
        * Implement drag, zoom, and hover interactions.

  Important: Since we write everything in one file, we have to include the styles and scripts inline.

 Let's write the index.html:

   - We'll have an <svg> element that takes the full viewport or a fixed size? We can set it to 100% of the window. But for simplicity, we'll set a fixed width and height (800x600) and allow zoom/pan to see beyond.

   - For the initial graph, we'll generate nodes with random positions and assign them to clusters. Then we'll create links within clusters and a few between clusters.

   - How to structure the graph data? We'll have two arrays: `nodes` and `links`.

   - We'll define the simulation and update the node and link positions on tick.

   - For highlighting neighbors:
        * We need to remember the original styles to revert on mouseout.
        * We can store the original stroke width of links and node radius (if changing size).

   - Instead of changing the node radius on hover (which might cause the force simulation to jump because the collision detection is based on the original radius), we can use a scaling transform on the node circle to make it bigger. But note: the force simulation uses the original radius. Alternatively, we can increase the radius and temporarily disable the force during the hover? That might be complex.

   - A simpler way: we can change the color and stroke of nodes and links without changing the size? Or change the radius without worrying about force because the simulation is typically running and will adjust? It might be acceptable to change the node radius without updating the force, because the repulsion force will push slightly, but it might look odd.

   - How about: on hover, we can set a larger radius and set the node.fx and node.fy to its current position to freeze it? But then we freeze many nodes which might break the dragging.

   - Alternatively, we can just change the visual without changing the physical properties? We can draw a bigger circle under the node as a "halo" that doesn't affect the simulation? That would be safe.

   - We'll do:
        * On mouseover: add a semi-transparent circle (with larger radius) to the node, and change the color of the node and its adjacent links and nodes.
        * On mouseout: remove the halo and revert the colors.

   - But note: we are only allowed to write one file, without external images, etc.

  Let's design:

   - We will create an SVG with the following structure:

      <svg width="800" height="600">
        <g class="container">  <!-- this group will be transformed for zoom/pan -->
          <g class="links"></g>
          <g class="nodes"></g>
        </g>
      </svg>

   - The zoom behavior will be attached to the <svg> and will update the transform of the <g class="container">.

   - We'll set some initial styles.

  Steps in the JavaScript:

    // Set up
    const width = 800, height = 600;
    const svg = d3.select("body").append("svg") ... ;

    // Create the container group for zoom
    const container = svg.append("g").attr("class", "container");

    // Set up zoom
    const zoom = d3.zoom().on("zoom", (event) => container.attr("transform", event.transform));
    svg.call(zoom);

    // Create the force simulation
    const simulation = d3.forceSimulation(nodes)
      .force("charge", d3.forceManyBody().strength(-100))
      .force("link", d3.forceLink(links).id(d => d.id))
      .force("center", d3.forceCenter(width / 2, height / 2));

    // Draw links
    const link = container.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(links)
        .enter()
        .append("line")
        .attr("stroke", "#999")
        .attr("stroke-width", 1)

    // Draw nodes
    const node = container.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("r", 5)
        .attr("fill", (d) => color(d.group))   // color by group
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended)
        )
        .on("mouseover", mouseover)   // our own functions for highlighting
        .on("mouseout", mouseout)

    // Add labels? Maybe not for 40 nodes, but if we want, we can add text.

    // Simulation events
    simulation.on("tick", () => {
        link.attr("x1", d => d.source.x)
            .attr("y1", d => d.source.y)
            .attr("x2", d => d.target.x)
            .attr("y2", d => d.target.y);
        node.attr("cx", d => d.x)
            .attr("cy", d => d.y);
    });

    // Drag functions
    function dragstarted(event, d) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(event, d) {
        d.fx = event.x;
        d.fy = event.y;
    }

    function dragended(event, d) {
        if (!event.active) simulation.alphaTarget(0);
        // Do not fix position after drag? To let it continue, we can set fx and fy to null to release.
        // But if we want the node to stay where it is, we set fx and fy to the current position? Actually, we set during drag, but when drag ends, we don't set to null? Then it stays put.
        // However, to allow the node to be moved again and be free, we set:
        // d.fx = null; d.fy = null;   // Then the node can move again? But then when we hover, it might move. We can leave it fixed? Or release? Often it's left fixed until dragged again? But we'll release when the simulation cools down? Actually, in the dragended, we set alphaTarget to 0 and then set fx and fy to the current position? Then we leave the node fixed? That's typical: after dragging, the node stays until we drag again and release without fixing.

        // We can remove the fixed position after drag ends? Only if you want to let it continue moving. But it's usual to fix the position until we release by double-clicking? We don't implement double-click, so let's leave the node fixed at the dragged position until the next drag? Then when we drag again and release without setting fx and fy to null, it stays. To allow releasing, we typically require double-click? We'll leave as is: node remains at dragged position until next drag starts and then we reset fx and fy? Actually, we don't reset in dragstarted? We just set fx/fy to the current x/y? Then when we drag, we are setting fx and fy, and when we release the mouse, we leave it. The node can be moved again by dragging? Yes.

        // But if we want to free a node without dragging it? Not implemented? We skip for now.
    }

    // Highlight functions
    function mouseover(event, d) {
        // Highlight the hovered node
        d3.select(this).attr("stroke", "black").attr("stroke-width", 2);

        // We want to highlight all neighbor nodes and links connected to d
        // First, find indices of neighbor nodes: any node that is a source or target of a link incident to this node.
        const neighborNodes = new Set();
        links.forEach(l => {
            if (l.source === d || l.target === d) {
                neighborNodes.add(l.source);
                neighborNodes.add(l.target);
            }
        });

        // Also, we want to highlight the links
        const neighborLinks = links.filter(l => l.source === d || l.target === d);

        // Now, change the style of neighbor nodes
        node.filter(nd => neighborNodes.has(nd))
            .attr("stroke", "black")   // we don't have a stroke by default? Then we set stroke and stroke-width to make it visible.
            .attr("stroke-width", 1.5);

        // Change the style of neighbor links
        link.filter(l => neighborLinks.includes(l))
            .attr("stroke", "red")
            .attr("stroke-width", 2);

        // Additionally, we might want to fade the rest? Or make the rest more transparent?
        // Fade the rest of the nodes and links
        node.filter(nd => !neighborNodes.has(nd))
            .attr("opacity", 0.2);
        link.filter(l => !neighborLinks.includes(l))
            .attr("opacity", 0.2);
    }

    function mouseout(event, d) {
        // Revert node and link styles
        node
            .attr("stroke", null)
            .attr("stroke-width", null)
            .attr("opacity", 1);
        link
            .attr("stroke", "#999")
            .attr("stroke-width", 1)
            .attr("opacity", 1);
    }

  Note: We are using `node` and `link` as D3 selections. Also, we have to be cautious about the `d` in the mouseover/mouseout: the hovered node.

  We'll generate test data: 40 nodes and enough links to see connections. We can use 5 clusters? Each cluster has nodes, and we'll create links within a cluster and a few between clusters.

  How to generate:

    const numNodes = 40;
    const numClusters = 5;
    const nodes = Array.from({length: numNodes}, (_, i) => ({
        id: i,
        group: Math.floor(Math.random() * numClusters)
    }));

    // Now, links: try to connect within the same group more often.
    const links = [];
    for (let i = 0; i < numNodes; i++) {
        // For each node, connect to a few other nodes in the same cluster?
        const thisNode = nodes[i];
        // How many links per node? Let's say 2 to 4.
        const numLinks = 2 + Math.floor(Math.random() * 3);
        // Candidates: other nodes in the same cluster? But we might also connect to other clusters sometimes.
        // First, let's get a list of nodes in the same cluster and different clusters.
        const sameCluster = nodes.filter(n => n.group === thisNode.group && n.id !== thisNode.id);
        const differentCluster = nodes.filter(n => n.group !== thisNode.group && n.id !== thisNode.id);

        // How many to same cluster? Say 2/3 of the numLinks? The rest to different.
        const numSame = Math.min(numLinks, Math.floor(Math.random() * sameCluster.length) + 1);
        const numDiff = Math.min(numLinks - numSame, differentCluster.length);
        // Pick randomly without replacement? We don't want duplicates?

        // Shuffle the arrays and take the first `numSame` and `numDiff`
        const shuffledSame = sameCluster.sort(() => 0.5 - Math.random());
        for (let j = 0; j < numSame; j++) {
            links.push({source: thisNode.id, target: shuffledSame[j].id});
        }

        const shuffledDiff = differentCluster.sort(() => 0.5 - Math.random());
        for (let j = 0; j < numDiff; j++) {
            links.push({source: thisNode.id, target: shuffledDiff[j].id});
        }
    }

    // But note: our links in the simulation are by node reference? In our generated data, we are using ids. Then we must set the forceLink to use the id accessor? And then after generating the links array, we must map the source and target references to the actual node objects? Because when we initialize the simulation, we have:
        .force("link", d3.forceLink(links).id(d => d.id))

    However, the links we generated have { source: id, target: id }. We want to replace the numbers by the corresponding node objects? Because the simulation expects the links to have source and target as node objects? D3 will convert the IDs? Actually the forceLink expects an array of { source, target } where source and target are the node objects? Or we can specify the id and then d3 creates an index? The way we did above: we passed an array of objects with source and target as the numeric ids? Then we set the `id` accessor to return the node's id. Then the forceLink will replace the numeric source/target with the corresponding node? No, we must have the links initially as node objects? Or we can tell forceLink to use the id to replace the source and target? Actually, the forceLink expects nodes? And our nodes are objects. We are setting links with source and target as the numeric id? Then we can do:

        .force("link", d3.forceLink(links).id(d => d.id).distance(50))

    But note: we must pass the links as:

        links = [{ source: 0, target: 1 }, ...]

    Then forceLink will convert the 0 and 1 to the nodes that have id=0 and id=1? Actually, the forceLink expects the source and target to be either indices (into the nodes array) or objects? We have passed the nodes array to forceSimulation(nodes). Then the links by default expect the source and target to be indices? But we are using an id? We can set the id accessor and then use id as the key? Also we set the nodes in the simulation? Actually, the documentation says we can set the links to use either index (number) or node object. So if we set:

        links = [{ source: 0, target: 1 }]   // but 0 and 1 are indices? Then we don't need id? But we are using id in the node? And our links are generated by id? Then we must map the links to have source and target as the node objects? Or we can convert:

        links = [{ source: thisNode, target: shuffledSame[0] }, ...]

    I think it's easier to create the links as node references? Because we have the node objects in the array.

    Let's change the generation:

        for each node i, we connect to some node objects? We have the `nodes` array. Then we don't use id? And then in the simulation, we don't need to set the id? Actually, the forceLink expects indices OR node objects? We are passing the node objects to the simulation, so the links must use node objects? Or indices? The forceLink documentation: the links array should have source and target as node objects? We can do:

          links.push({source: thisNode, target: shuffledSame[j]});

    Then we don't need to set the `id`? Actually, the `id` function in forceLink is used only when the nodes are reloaded? We are setting the links to be the actual objects? It's simpler.

    So in the generation code, we use:

        const sameCluster = nodes.filter(n => n.group === thisNode.group && n !== thisNode);   // note: we are filtering by reference? Actually, we have the same thisNode? Yes, because we are iterating by each node in the nodes array.

    But note: we are generating the links array after the nodes? And we are using the same node objects? Yes.

  So let's adjust the data generation.

  Also, we'll use a color scale for node groups.

  We'll use d3.schemeCategory10 for the color of the nodes? But we cannot assume d3.scaleOrdinal is available? Actually d3.min.js includes all of d3, so we can.

    const color = d3.scaleOrdinal(d3.schemeCategory10);

  But note: the groups are 0 to numClusters-1? Then the color will map 0 -> color0, etc.

  Finally, we write the entire HTML string?

  We'll write:

      <!DOCTYPE html>
      <html>
      <head>
          <title>D3 Force-Directed Graph</title>
          <script src="d3.min.js"></script>
          <style>
            body { margin: 0; }
            svg { width: 800px; height: 600px; border: 1px solid #ccc; }
          </style>
      </head>
      <body>
          <script>
            // Our code here
          </script>
      </body>
      </html>

  But note: we are writing to index.html in the current directory.

  We'll write the entire content with the data generation and the drawing.

  Important: the script tag for d3.min.js must come before our own script.

  We are ready to write the file.