I'll create a single-page web app that renders an interactive force-directed graph with the requested features. The graph will have about 40 nodes organized into several clusters, with draggable nodes, hover highlighting of neighbors, and zoom/pan functionality.

I've created a single-page web application that renders an interactive force-directed graph with the requested features: 1. About 40 nodes organized into 6 clusters 2. Draggable nodes using D3's drag behavior 3. Hover highlighting of nodes and their neighbors 4. Zoom and pan functionality using D3's zoom behavior 5. Visual distinction between different clusters with different colors The graph is fully self-contained in one HTML file with no external dependencies beyond the provided d3.min.js file. The nodes are grouped into clusters, with each cluster having a center node and several surrounding nodes. Links connect nodes within clusters and some inter-cluster connections. When you hover over a node, it highlights along with its connected neighbors, and a tooltip shows information about the node. You can drag any node to reposition it, and use the mouse wheel or two-finger gesture to zoom and pan around the graph. The implementation uses D3's force simulation to create natural-looking layouts, with forces for attraction/repulsion, collision avoidance, and centering.