Force-directed graph · deepseek-chat
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.
Here's a complete `index.html` with an interactive force-directed graph using D3.js (loaded from `d3.min.js`). It includes draggable nodes, hover highlighting of neighbors, and zoom/pan functionality: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Force-Directed Graph</title> <script src="d3.min.js"></script> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; } svg { display: block; } .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: 0.6; } .node text { pointer-events: none; font: 10px sans-serif; } .node:hover { stroke: #000; stroke-width: 2px; } </style> </head> <body> <script> // Define sample nodes and links (4 clusters) const nodes = [ // Cluster 1 { id: 1, group: 1, fx: 100, fy: 100 }, { id: 2, group: 1, fx: 120, fy: 80 }, { id: 3, group: 1, fx: 80, fy: 120 }, { id: 4, group: 1, fx: 120, fy: 120 }, { id: 5, group: 1, fx: 80, fy: 80 }, { id: 6, group: 1, fx: 100, fy: 60 }, { id: 7, group: 1, fx: 60, fy: 100 }, { id: 8, group: 1, fx: 140, fy: 100 }, { id: 9, group: 1, fx: 100, fy: 140 }, // Cluster 2 { id: 10, group: 2, fx: 300, fy: 100 }, { id: 11, group: 2, fx: 320, fy: 80 }, { id: 12, group: 2, fx: 280, fy: 120 }, { id: 13, group: 2, fx: 320, fy: 120 }, { id: 14, group: 2, fx: 280, fy: 80 }, { id: 15, group: 2, fx: 300, fy: 60 }, { id: 16, group: 2, fx: 260, fy: 100 }, { id: 17, group: 2, fx: 340, fy: 100 }, { id: 18, group: 2, fx: 300, fy: 140 }, // Cluster 3 { id: 19, group: 3, fx: 100, fy: 300 }, { id: 20, group: 3, fx: 120, fy: 280 }, { id: 21, group: 3, fx: 80, fy: 320 }, { id: 22, group: 3, fx: 120, fy: 320 }, { id: 23, group: 3, fx: 80, fy: 280 }, { id: 24, group: 3, fx: 100, fy: 260 }, { id: 25, group: 3, fx: 60, fy: 300 }, { id: 26, group: 3, fx: 140, fy: 300 }, { id: 27, group: 3, fx: 100, fy: 340 }, // Cluster 4 { id: 28, group: 4, fx: 300, fy: 300 }, { id: 29, group: 4, fx: 320, fy: 280 }, { id: 30, group: 4, fx: 280, fy: 320 }, { id: 31, group: 4, fx: 320, fy: 320 }, { id: 32, group: 4, fx: 280, fy: 280 }, { id: 33, group: 4, fx: 300, fy: 260 }, { id: 34, group: 4, fx: 260, fy: 300 }, { id: 35, group: 4, fx: 340, fy: 300 }, { id: 36, group: 4, fx: 300, fy: 340 } ]; const links = [ // Cluster 1 links { source: 1, target: 2 }, { source: 1, target: 3 }, { source: 1, target: 4 }, { source: 1, target: 5 }, { source: 2, target: 3 }, { source: 2, target: 4 }, { source: 2, target: 5 }, { source: 3, target: 4 }, { source: 3, target: 5 }, { source: 4, target: 5 }, { source: 1, target: 6 }, { source: 1, target: 7 }, { source: 1, target: 8 }, { source: 1, target: 9 }, // Cluster 2 links { source: 10, target: 11 }, { source: 10, target: 12 }, { source: 10, target: 13 }, { source: 10, target: 14 }, { source: 11, target: 12 }, { source: 11, target: 13 }, { source: 11, target: 14 }, { source: 12, target: 13 }, { source: 12, target: 14 }, { source: 13, target: 14 }, { source: 10, target: 15 }, { source: 10, target: 16 }, { source: 10, target: 17 }, { source: 10, target: 18 }, // Cluster 3 links { source: 19, target: 20 }, { source: 19, target: 21 }, { source: 19, target: 22 }, { source: 19, target: 23 }, { source: 20, target: 21 }, { source: 20, target: 22 }, { source: 20, target: 23 }, { source: 21, target: 22 }, { source: 21, target: 23 }, { source: 22, target: 23 }, { source: 19, target: 24 }, { source: 19, target: 25 }, { source: 19, target: 26 }, { source: 19, target: 27 }, // Cluster 4 links { source: 28, target: 29 }, { source: 28, target: 30 }, { source: 28, target: 31 }, { source: 28, target: 32 }, { source: 29, target: 30 }, { source: 29, target: 31 }, { source: 29, target: 32 }, { source: 30, target: 31 }, { source: 30, target: 32 }, { source: 31, target: 32 }, { source: 28, target: 33 }, { source: 28, target: 34 }, { source: 28, target: 35 }, { source: 28, target: 36 } ]; // Colors for each cluster const color = d3.scaleOrdinal() .domain([1, 2, 3, 4]) .range(["#ff7f0e", "#1f77b4", "#2ca02c", "#d62728"]); // Set up SVG and force simulation const width = window.innerWidth; const height = window.innerHeight; const svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); // Add zoom/pan behavior svg.call(d3.zoom() .scaleExtent([0.1, 8]) .on("zoom", (event) => { g.attr("transform", event.transform); })) .append("g"); const g = svg.append("g"); // Force simulation setup const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(30)) .force("charge", d3.forceManyBody().strength(-100)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collision", d3.forceCollide().radius(10)); // Draw links const link = g.append("g") .selectAll("line") .data(links) .enter().append("line") .attr("class", "link") .attr("stroke-width", 2); // Draw nodes const node = g.append("g") .selectAll("circle") .data(nodes) .enter().append("circle") .attr("class", "node") .attr("r", 8) .attr("fill", d => color(d.group)) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)) .on("mouseover", function(d) { // Highlight neighbors on hover const neighbors = new Set(); links.forEach(link => { if (link.source === d || link.source.id === d.id) { neighbors.add(link.target); } if (link.target === d || link.target.id === d.id) { neighbors.add(link.source); } }); node.attr("opacity", n => neighbors.has(n) || n === d ? 1 : 0.2); link.attr("opacity", l => neighbors.has(l.source) || neighbors.has(l.target) || l.source === d || l.target === d ? 1 : 0.2); }) .on("mouseout", function() { node.attr("opacity", 1); link.attr("opacity", 1); }); // Update positions on simulation 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); }); // 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; } </script> </body> </html> To save this file as `index.html` in the current directory, I'll use the `write` tool.
index.html (8235 bytes)Successfully wrote 8235 bytes to index.html
I've created a single-page web app in `index.html` that: 1. Uses the pre-provided `d3.min.js` library 2. Defines a force-directed graph with 36 nodes in 4 clusters (each with its own color) 3. Includes interactive features: - Draggable nodes (click and drag to reposition) - Hover highlighting (mouse over a node to see its connections) - Zoom/pan (mouse wheel to zoom, drag to pan) 4. Is entirely self-contained with no external dependencies To preview the result, open `index.html` in a web browser. The nodes are initially arranged in clusters but will dynamically reposition according to the force simulation.
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
Only 4 tiny star-shaped clusters of ~8 nodes visible, not ~40 nodes; drag/wheel just pan but graph never fills viewport.
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.