Force-directed graph · qwen3-30b-a3b-instruct-2507
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.
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.
index.html (8334 bytes)Successfully wrote 8334 bytes to index.html
I've created a complete interactive force-directed graph with the following features: - 40 nodes organized into 4 clusters (10 nodes each) - Draggable nodes with smooth physics simulation - Hover highlighting of nodes and their connected links - Tooltips showing node information on hover - Zoom and pan functionality - Reset and restart controls - Responsive design that adjusts to window size - Visual distinction between clusters with different colors The graph uses D3.js with a force simulation that includes: - Link forces to maintain connections - Charge forces to prevent overlapping - Centering forces to keep the graph balanced - Collision detection to avoid overlapping nodes All code is contained in a single index.html file with inline CSS and JavaScript, using only the provided d3.min.js library. The graph is fully interactive and runs entirely in the browser with no external dependencies.
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
EVALUATION
Force-directed clustered graph renders with drag panning and zoom scaling nodes; click/keyboard show no visible highlight.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.