The user wants me to create an interactive force-directed graph using d3.js. They want:
1. About 40 nodes in several clusters
2. Draggable nodes
3. Hover highlighting of neighbors
4. Zoom and pan capabilities
5. Sample nodes and links defined inline

I need to create a self-contained HTML file with everything inline (CSS in <style>, JS in <script>).

Let me plan the structure:

1. HTML structure with a container for the graph
2. CSS for styling
3. JS with:
   - Sample data (40 nodes, multiple clusters, links between them)
   - D3 force simulation setup
   - Zoom/pan implementation (using d3.zoom)
   - Drag functionality
   - Hover effects to highlight neighbors

Let me create the data structure first - I'll create a few clusters with nodes and links between them to form a meaningful graph.

Let me write the complete index.html file.

The file was written, but I notice there are some issues in the code. Looking at the generated file, there are some syntax issues with the D3 code that need to be cleaned up. Let me fix the issues:

1. The `__d3_kind__hash($(e.target)[0].id)` syntax is incorrect - this looks like it was written for jQuery
2. There's a `svg.each` that should be `svg.selectAll('g')`
3. The `tooltipLayer` is being redefined twice
4. There's some mixing of D3v4 and v5 syntax

Let me rewrite the file with proper D3 v5/v4 syntax that works together:

The file has been written successfully. Let me verify it exists and show a summary of what was created.

I need to fix the command parameter format.

The file is created successfully. Now let me provide a summary of what was created.