Force-directed graph · gemma-4-26b-a4b-it

The objective is to build an interactive force-directed graph using D3.js in a single `index.html` file.

    *   40 nodes (IDs 0-39).
    *   Four clusters of 10 nodes each.
    *   Color-coding for clusters.
    *   Intra-cluster links: Ring formation within each cluster.
    *   Inter-cluster links: Nodes 0, 10, 20, and 30 form a ring connecting the clusters.
    *   Use `d3.min.js` (available in the current directory).
    *   Force simulation for positioning.
    *   Labels (IDs) for nodes.
    *   Dragging: Node dragging (simulation moves) and Background panning.
    *   Zooming: Mouse wheel.
    *   Hovering: Highlight node + neighbors + connecting links; dim others.
    *   Reset view button.
    *   Single-file `index.html` (CSS/JS inline).
    *   No external network requests.

    *   `d3.min.js` is present in the current directory. I should check if it exists first.

    *   Nodes: `Array(40)` with `id`, `group`.
    *   Links:
        *   Cluster $i$ (nodes $10i$ to $10i+9$): Ring $10i \to 10i+1 \to \dots \to 10i+9 \to 10i$.
        *   Inter-cluster: $0 \to 10 \to 20 \to 30 \to 0$.

    *   SVG container.
    *   `g` element for zooming/panning.
    *   `g` element for links.
    *   `g` element for nodes (including labels).
    *   Button for "Reset view".

    *   `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCenter`, `forceCollide`.
    *   `d3.zoom` for panning and zooming.
    *   `d3.drag` for node dragging.
    *   Hover effects: `mouseover` / `mouseout` to adjust opacity of everything else.

    *   `index.html`
    *   `<style>`: Basic styling for nodes, links, labels, and the container.
    *   `<script src="d3.min.js"></script>`
    *   `<script>`: The main logic.

    *   Check if `d3.min.js` exists.

    *   Create `index.html`.
    *   Add the logic.

    *   *Nodes:*
        ```javascript
        const nodes = Array.from({ length: 40 }, (_, i) => ({ id: i, group: Math.floor(i / 10) }));
        ```
    *   *Links:*
        ```javascript
        const links = [];
        for (let g = 0; g < 4; g++) {
            const start = g * 10;
            for (let i = 0; i < 10; i++) {
                links.push({ source: start + i, target: start + ((i + 1) % 10) });
            }
        }
        // Inter-cluster ring
        links.push({ source: 0, target: 10 });
        links.push({ source: 10, target: 20 });
        links.push({ source: 20, target: 30 });
        links.push({ source: 30, target: 0 });
        ```

    *   *Zooming:*
        `d3.zoom().on("zoom", (event) => g.attr("transform", event.transform))`
    *   *Dragging:*
        Standard D3 drag behavior.
    *   *Hover:*
        On `mouseover`, identify neighbors and set `opacity`.
        On `mouseout`, reset all opacities.

    *   *Interaction:*
        *   Drag node: `simulation.alphaTarget(0.3).restart(); node.fx =...; node.fy =...;`
        *   Release: `simulation.alphaTarget(0); node.fx = null; node.fy = null;`
        *   Background Dragging: `d3.zoom` handles this.

    *   *Reset view:*
        `d3.select(svg).transition().call(zoom.transform, d3.zoomIdentity);`

    *   *Verify:*
        *   40 nodes? Yes.
        *   4 clusters? Yes.
        *   Ring within clusters? Yes.
        *   Inter-cluster ring? Yes.
        *   Labeling? Yes.
        *   Dragging node? Yes.
        *   Dragging background? Yes.
        *   Zooming? Yes.
        *   Hovering? Yes.
        *   Reset view? Yes.
        *   No external assets? Yes.

    *   *Self-Correction during drafting:*
        Wait, if I use `d3.zoom`, I need to make sure the zoom event target is the `svg` but the transform is applied to the `g` container. Also, the `drag` should be on the nodes, but the background panning is usually handled by `d3.zoom` on the `svg`.

    *   *Refining the hover logic:*
        To make it efficient:
        1.  `mouseover` on node `d`:
            - `links.style("opacity", l => (l.source.id === d.id || l.target.id === d.id)? 1 : 0.1)`
            - `nodes.style("opacity", n => (n === d || isNeighbor(d, n))? 1 : 0.1)`
        2.  This might be tricky with IDs. Better to calculate neighbors first.

    *   *Check for existing d3.min.js:*
        I'll check the directory first.

`d3.min.js` is present. I will now create `index.html`.

I'll structure the code carefully.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Force-Directed Graph</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: sans-serif;
            background-color: #1a1a1a;
        }
        #controls {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 10;
        }
        button {
            padding: 10px 15px;
            cursor: pointer;
            background: #444;
            color: white;
            border: 1px solid #666;
            border-radius: 4px;
        }
        button:hover {
            background: #555;
        }
        svg {
            display: block;
            width: 100vw;
            height: 100vh;
            cursor: grab;
        }
        svg:active {
            cursor: grabbing;
        }
        .node {
            stroke: #fff;
            stroke-width: 1.5px;
            cursor: pointer;
        }
        .link {
            stroke: #999;
            stroke-opacity: 0.6;
            stroke-width: 2px;
        }
        .label {
            fill: #fff;
            font-size: 12px;
            pointer-events: none;
            text-anchor: middle;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="controls">
        <button id="reset">Reset View</button>
    </div>
    <svg id="graph"></svg>
    <script src="d3.min.js"></script>
    <script>
        // Graph Data
        const numNodes = 40;
        const numClusters = 4;
        const nodesPerCluster = 10;

        const nodes = Array.from({ length: numNodes }, (_, i) => ({
            id: i,
            group: Math.floor(i / numClusters) // Wait, no, 4 clusters of 10.
            // Let's re-calculate:
            // cluster 0: 0-9
            // cluster 1: 10-19
            // cluster 2: 20-29
            // cluster 3: 30-39
        }));

        // Corrected group assignment
        nodes.forEach(n => n.group = Math.floor(n.id / 10));

        const links = [];
        // Intra-cluster links
        for (let g = 0; g < 4; g++) {
            const start = g * 10;
            for (let i = 0; i < 10; i++) {
                const source = start + i;
                const target = start + ((i + 1) % 10);
                links.push({ source, target });
            }
        }
        // Inter-cluster links (0, 10, 20, 30 ring)
        links.push({ source: 0, target: 10 });
        links.push({ source: 10, target: 20 });
        links.push({ source: 20, target: 30 });
        links.push({ source: 30, target: 0 });

        // Colors
        const colors = ["#e41a1c", "#377eb8", "#4daf4a", "#ff7f00"];

        // SVG Setup
        const svg = d3.select("#graph");
        const container = svg.append("g");

        const width = window.innerWidth;
        const height = window.innerHeight;

        // Simulation
        const simulation = d3.forceSimulation(nodes)
            .force("link", d3.forceLink(links).id(d => d.id).distance(50))
            .force("charge", d3.forceManyBody().strength(-100))
            .force("center", d3.forceCenter(width / 2, height / 2))
            .force("collision", d3.forceCollide().radius(20));

        // Zoom
        const zoom = d3.zoom()
            .scaleExtent([0.1, 8])
            .on("zoom", (event) => {
                container.attr("transform", event.transform);
            });

        svg.call(zoom);

        // Links
        const link = container.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(links)
            .enter().append("line")
            .attr("class", "link")
            .attr("stroke", "#999")
            .attr("stroke-opacity", 0.6);

        // Nodes
        const node = container.append("g")
            .attr("class", "nodes")
            .selectAll("circle")
            .data(nodes)
            .enter().append("circle")
            .attr("class", "node")
            .attr("r", 10)
            .attr("fill", d => colors[d.group])
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));

        // Labels
        const labels = container.append("g")
            .attr("class", "labels")
            .selectAll("text")
            .data(nodes)
            .enter().append("text")
            .attr("class", "label")
            .text(d => d.id);

        // Simulation Tick
        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);
            
            labels
                .attr("x", d => d.x)
                .attr("y", d => d.y + 4);
        });

        // Dragging interactions
        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);
            d.fx = null;
            d.fy = null;
        }

        // Hover interactions
        node.on("mouseover", (event, d) => {
            // Find neighbors
            const neighbors = new Set();
            links.forEach(l => {
                if (l.source.id === d.id) neighbors.add(l.target.id);
                if (l.target.id === d.id) neighbors.add(l.source.id);
            });

            node.style("opacity", n => (n.id === d.id || neighbors.has(n.id))? 1 : 0.1);
            link.style("opacity", l => (l.source.id === d.id || l.target.id === d.id)? 1 : 0.1);
        });

        node.on("mouseout", () => {
            node.style("opacity", 1);
            link.style("opacity", 0.6);
        });

        // Reset View
        document.getElementById("reset").addEventListener("click", () => {
            svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
        });

        // Handle window resize
        window.addEventListener('resize', () => {
            const w = window.innerWidth;
            const h = window.innerHeight;
            simulation.force("center", d3.forceCenter(w / 2, h / 2));
            simulation.alpha(0.3).restart();
        });

    </script>
</body>
</html>
```

Wait, I need to ensure the `d3.zoom` doesn't conflict with the `drag` on the nodes. Usually, d3.zoom on the svg works well with d3.drag on the elements.

Let's refine the hover logic to be more robust.

```javascript
        // Hover interactions
        node.on("mouseover", (event, d) => {
            const neighbors = new Set();
            links.forEach(l => {
                if (l.source.id === d.id) neighbors.add(l.target.id);
                if (l.target.id === d.id) neighbors.add(l.source.id);
            });

            node.transition().duration(200).style("opacity", n => (n.id === d.id || neighbors.has(n.id))? 1 : 0.1);
            link.transition().duration(200).style("opacity", l => (l.source.id === d.id || l.target.id === d.id)? 1 : 0.1);
        });

        node.on("mouseout", () => {
            node.transition().duration(200).style("opacity", 1);
            link.transition().duration(200).style("opacity", 0.6);
        });
```

Actually, I'll use simple `style` assignments for performance and to ensure it works quickly. And I should use `d.source.id` instead of `d.source` if `links` is defined with `id` accessor.

One detail: `d3.forceLink(links).id(d => d.id)` makes `l.source` and `l.target` the objects themselves. So `l.source.id` is correct.

Wait, let's re-check the hover logic.
If I hover a node, I want to see the node and its neighbors and the links connecting them.

The `reset` requirement: "Provide Reset view to restore the initial camera framing without replacing the graph data."
My implementation: `svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);`
This looks correct.

Let's write the file.

Now I need to verify the requirements.
1.  40 nodes (0-39), 4 clusters of 10.
2.  Ring within clusters.
3.  Inter-cluster ring (0, 10, 20, 30).
4.  Force simulation, labels.
5.  Drag node: move node, simulation responds.
6.  Drag background: pan.
7.  Mouse wheel: zoom.
8.  Hover: highlight node + neighbors + links.
9.  Reset view: restores initial framing.

I will use the `browser` tool to check the visual output and behavior.
Since I cannot "interact" via the browser tool in a way that simulates drag/zoom/hover perfectly with a single command (it's mostly for inspection), I will first launch it and then use the inspector if needed.
Wait, I should check the `index.html` is working first.

The user wants me to build an interactive force-directed graph using `d3.min.js` (which is provided in the current directory).

Here's the plan:
1.  Check if `d3.min.js` exists in the current directory.
2.  Create an `index.html` file that contains the HTML, CSS, and JS needed to fulfill the requirements.
3.  Requirements:
    *   40 nodes (0-39), 4 color-coded clusters of 10.
    *   Links:
        *   Each cluster forms a ring.
        *   Nodes 0, 10, 20, 30 form a ring connecting clusters.
    *   Force simulation.
    *   Labels (IDs).
    *   Interactivity:
        *   Dragging nodes moves them.
        *   Dragging background pans (requires `d3-zoom` behavior or manual implementation via `d3-zoom`'s transform).
        *   Mouse wheel zooms.
        *   Hovering: Highlights node + neighbors + links; dims others.
        *   Reset view button.
    *   No external assets/CDNs.
    *   Use `d3.min.js` via `<script src="d3.min.js"></script>`.
    *   Single-page app in `index.html`.

Let's start by checking the directory content.