Force-directed graph · qwen3-coder-30b-a3b-instruct
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.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 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.
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Force-Directed Graph</title> <script src="d3.min.js"></script> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f5f5f5; font-family: Arial, sans-serif; } #graph-container { width: 100vw; height: 100vh; background-color: white; } .link { stroke: #999; stroke-opacity: 0.6; } .node { cursor: pointer; } .node--fixed { fill: #ff7f0e; } .node--hover { stroke: #000; stroke-width: 2px; } .node-text { text-anchor: middle; dominant-baseline: middle; font-size: 10px; pointer-events: none; fill: #333; } .neighbor-highlight { stroke: #ff0000; stroke-width: 3px; } .zoom-controls { position: absolute; top: 20px; right: 20px; background: white; padding: 10px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 10; } .zoom-controls button { margin: 2px; padding: 5px 10px; cursor: pointer; } </style> </head> <body> <div id="graph-container"></div> <div class="zoom-controls"> <button id="zoom-in">Zoom In</button> <button id="zoom-out">Zoom Out</button> <button id="reset-view">Reset</button> </div> <script> // Define sample nodes and links const nodes = [ { id: "A", group: 1 }, { id: "B", group: 1 }, { id: "C", group: 1 }, { id: "D", group: 2 }, { id: "E", group: 2 }, { id: "F", group: 2 }, { id: "G", group: 3 }, { id: "H", group: 3 }, { id: "I", group: 3 }, { id: "J", group: 4 }, { id: "K", group: 4 }, { id: "L", group: 4 }, { id: "M", group: 5 }, { id: "N", group: 5 }, { id: "O", group: 5 }, { id: "P", group: 6 }, { id: "Q", group: 6 }, { id: "R", group: 6 }, { id: "S", group: 7 }, { id: "T", group: 7 }, { id: "U", group: 7 }, { id: "V", group: 8 }, { id: "W", group: 8 }, { id: "X", group: 8 }, { id: "Y", group: 9 }, { id: "Z", group: 9 }, { id: "AA", group: 9 }, { id: "AB", group: 10 }, { id: "AC", group: 10 }, { id: "AD", group: 10 }, { id: "AE", group: 11 }, { id: "AF", group: 11 }, { id: "AG", group: 11 }, { id: "AH", group: 12 }, { id: "AI", group: 12 }, { id: "AJ", group: 12 } ]; const links = [ { source: "A", target: "B" }, { source: "A", target: "C" }, { source: "B", target: "C" }, { source: "D", target: "E" }, { source: "D", target: "F" }, { source: "E", target: "F" }, { source: "G", target: "H" }, { source: "G", target: "I" }, { source: "H", target: "I" }, { source: "J", target: "K" }, { source: "J", target: "L" }, { source: "K", target: "L" }, { source: "M", target: "N" }, { source: "M", target: "O" }, { source: "N", target: "O" }, { source: "P", target: "Q" }, { source: "P", target: "R" }, { source: "Q", target: "R" }, { source: "S", target: "T" }, { source: "S", target: "U" }, { source: "T", target: "U" }, { source: "V", target: "W" }, { source: "V", target: "X" }, { source: "W", target: "X" }, { source: "Y", target: "Z" }, { source: "Y", target: "AA" }, { source: "Z", target: "AA" }, { source: "AB", target: "AC" }, { source: "AB", target: "AD" }, { source: "AC", target: "AD" }, { source: "AE", target: "AF" }, { source: "AE", target: "AG" }, { source: "AF", target: "AG" }, { source: "AH", target: "AI" }, { source: "AH", target: "AJ" }, { source: "AI", target: "AJ" } ]; // Set up SVG dimensions and margins const width = window.innerWidth; const height = window.innerHeight; // Create SVG container const svg = d3.select("#graph-container") .append("svg") .attr("width", width) .attr("height", height); // Create zoom behavior const zoom = d3.zoom() .scaleExtent([0.1, 10]) .on("zoom", (event) => { g.attr("transform", event.transform); }); // Apply zoom to svg svg.call(zoom); // Create group for graph elements const g = svg.append("g"); // Create a color scale for groups const colorScale = d3.scaleOrdinal() .domain(d3.range(1, 13)) .range(d3.schemeCategory10); // Create force simulation const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(100)) .force("charge", d3.forceManyBody().strength(-300)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collision", d3.forceCollide().radius(20)); // Create links const link = g.append("g") .attr("class", "links") .selectAll("line") .data(links) .enter() .append("line") .attr("class", "link") .attr("stroke-width", 1.5); // Create nodes const node = g.append("g") .attr("class", "nodes") .selectAll("circle") .data(nodes) .enter() .append("circle") .attr("class", "node") .attr("r", 12) .attr("fill", d => colorScale(d.group)) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)) .on("mouseover", mouseover) .on("mouseout", mouseout); // Add node labels const text = g.append("g") .attr("class", "labels") .selectAll("text") .data(nodes) .enter() .append("text") .attr("class", "node-text") .text(d => d.id) .attr("font-family", "sans-serif") .attr("font-size", 10); // Update positions on each tick simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); text .attr("x", d => d.x) .attr("y", d => d.y); }); // Highlight neighbors on hover let highlightNodes = new Set(); let highlightLinks = new Set(); function mouseover(event, d) { // Highlight neighbors and connections const neighbors = new Set(); const connectedNodes = new Set(); // Find neighbors links.forEach(link => { if (link.source.id === d.id) { neighbors.add(link.target.id); connectedNodes.add(link.target.id); } else if (link.target.id === d.id) { neighbors.add(link.source.id); connectedNodes.add(link.source.id); } }); // Highlight connections to neighbors const neighborNodes = node.filter(n => neighbors.has(n.id)); const neighborLinks = link.filter(l => (l.source.id === d.id || l.target.id === d.id) && (neighbors.has(l.source.id) || neighbors.has(l.target.id)) ); // Highlight the node itself d3.select(this).classed("node--hover", true).raise(); // Highlight neighbors neighborNodes.classed("node--hover", true); // Highlight links to neighbors neighborLinks.classed("neighbor-highlight", true); // Reduce opacity of non-highlighted nodes node.filter(n => !connectedNodes.has(n.id) && n.id !== d.id) .attr("opacity", 0.3); // Reduce opacity of non-highlighted links link.filter(l => !connectedNodes.has(l.source.id) && !connectedNodes.has(l.target.id)) .attr("opacity", 0.1); } function mouseout(event, d) { // Remove highlight d3.select(this).classed("node--hover", false); // Remove neighbor highlights node.classed("node--hover", false); link.classed("neighbor-highlight", false); // Restore opacity node.attr("opacity", 1); link.attr("opacity", 1); } // Drag functions function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } // Zoom controls functionality document.getElementById("zoom-in").addEventListener("click", () => { svg.transition().call(zoom.scaleBy, 1.2); }); document.getElementById("zoom-out").addEventListener("click", () => { svg.transition().call(zoom.scaleBy, 0.8); }); document.getElementById("reset-view").addEventListener("click", () => { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); }); // Handle window resize window.addEventListener("resize", () => { const newWidth = window.innerWidth; const newHeight = window.innerHeight; svg.attr("width", newWidth).attr("height", newHeight); simulation.force("center", d3.forceCenter(newWidth / 2, newHeight / 2)); simulation.alpha(0.3).restart(); }); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.