Using the pre-provided d3.min.js (global d3), render an interactive force-directed graph of about 40 nodes in several clusters with draggable nodes, hover highlighting of neighbors, and zoom/pan. Define the sample nodes and links inline.

We need to build single-page web app and write it ALL into one self-contained file named index.html in current directory. CSS in <style> tag, JS in <script> tag, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests: artifact runs fully sandboxed with no network. End with index.html present. These library file(s) are ALREADY present in current directory — load each with a plain <script src="NAME"></script> using its exact filename (never a CDN or URL), then build on top of it: d3.min.js

Current working directory /tmp/ws

Check if d3.min.js exists.

Good. Need to write index.html with script src="d3.min.js". Create single file.

Requirements: about 40 nodes in several clusters with draggable nodes, hover highlighting of neighbors, zoom/pan. Define sample nodes and links inline.

We need CSS in style tag, JS in script tag.

Force-directed graph: d3 forceSimulation.

About 40 nodes. Several clusters: maybe 4 clusters of 10 nodes each.

Draggable nodes: d3.drag.

Hover highlighting neighbors: on mouseover, highlight node and its linked nodes/links.

Zoom/pan: d3.zoom.

Self-contained.

Make index.html with proper HTML5.

Use <script src="d3.min.js"></script> before our script.

Make nice styling.

Let's create ~40 nodes. Let's generate programmatically? Could define inline manually. Better generate via JS to ensure ~40. But spec says define sample nodes and links inline. Probably define arrays in JS code inline. That's okay.

Could predefine clusters: cluster names: Alpha, Beta, Gamma, Delta.

Create nodes: id 0-39, group = cluster.

Links: intra-cluster connections and some inter-cluster.

We can generate links randomly with some probability.

Simpler: define nodes array with 40 objects. Links array maybe 80 links.

Let's generate programmatically but still inline definition: we can create nodes array using for loop generating. That counts as defining inline? Might be okay. Probably fine to hardcode.

Simplify: create nodes = [] and for i in 0..39 create node with group = Math.floor(i/10). Then create links: for each node connect to 2-3 neighbors within cluster + few random cross.

But requirement "Define the sample nodes and links inline." Might be interpreted as literal data in source. Generating via loop is still inline definition. Probably acceptable.

Better to have explicit data for clarity? Could be large. Loop is fine.

Let's create 40 nodes, 4 clusters.

Force simulation with link, charge, center.

Drag behavior: drag started etc.

Hover highlighting: use .on("mouseover") on node circles and links. Could highlight neighbors: compute adjacency map.

Implementation steps:

HTML body with svg.

Style: background, font.

Script after d3 load.

Use d3.select("svg")... width height.

Use zoom behavior attached to g container.

Create simulation.

Nodes: circles with radius based on group? color by group.

Add labels text.

Hover highlighting: set opacity for non-neighbor nodes/links.

Draggable: d3.drag().

Let's write file.

Make sure index.html path is /tmp/ws/index.html

Use write tool.

Let's craft content.

We wrote index.html. Verify exists.

Done. Provide summary.