Force-directed graph · qwen3-coder-flash
Output generated Cost / run $0.0043 Runtime 40.3s
Prompt for this run
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.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
METRICS
Transcript · 4 messages
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.
I'll create an interactive force-directed graph using D3.js with draggable nodes, hover highlighting, and zoom/pan functionality. Let me build this as a single HTML file.
index.html (10593 bytes)Successfully wrote 10593 bytes to index.html
I've created an interactive force-directed graph with the following features: 1. **40 nodes** organized into several clusters (8 groups) 2. **Draggable nodes** - you can move nodes around with your mouse 3. **Hover highlighting** - when hovering over a node: - The node turns red - Connected links become red - Neighboring nodes also turn red 4. **Zoom and pan** - use mouse wheel to zoom, click and drag to pan 5. **Responsive design** - adjusts to window size changes 6. **Tooltips** - shows node information on hover 7. **Visual grouping** - different colors for different clusters The graph uses D3.js for the force-directed layout algorithm and includes realistic physics simulation with attraction/repulsion forces between nodes. To interact with the graph: - Click and drag nodes to reposition them - Hover over any node to see its neighbors highlighted - Use mouse wheel to zoom in/out - Click and drag the background to pan around The implementation is contained in a single HTML file with all CSS and JavaScript included inline as requested.