I need to create a single-page web app with an interactive force-directed graph using d3.js. Let me plan out what I need:

1. A self-contained HTML file with:
   - CSS in a <style> tag
   - JS in a <script> tag
   - Load d3.min.js from the local file (not CDN)

2. Features needed:
   - About 40 nodes in several clusters
   - Draggable nodes
   - Hover highlighting of neighbors
   - Zoom/pan functionality

Let me create this step by step:

1. Create the HTML structure
2. Add CSS for styling
3. Generate sample data with clusters
4. Set up the force-directed graph with d3
5. Add drag functionality
6. Add hover highlighting
7. Add zoom/pan

Let me write the code:

I've created a complete single-page web app with an interactive force-directed graph using d3.js. Let me verify it's there and working by checking the file.

I've created the interactive force-directed graph with all the requested features:

1. **40 nodes in 5 clusters** (Technology, Science, Arts, Business, Sports) with varying sizes
2. **Draggable nodes** - using d3.drag behavior
3. **Hover highlighting of neighbors** - when hovering a node, connected nodes and links are highlighted while others are dimmed
4. **Zoom/pan** - using d3.zoom with scroll to zoom and drag background to pan
5. **Self-contained** - all CSS and JS inline, no external resources except the provided d3.min.js
6. **Visual polish** - gradient background, glassmorphism panels, smooth transitions

The graph includes:
- Color-coded clusters with a legend
- Node labels
- Info panel with instructions
- Control buttons to reset view and restart simulation
- Responsive design that handles window resizing
- Cluster-based force to keep related nodes together