2c:null 2d:["$","title",null,{"children":"Selfish Sheep: Interactive Herd Simulation | Chuncheng | Observable"}] 32:T444,# Selfish Sheep: Interactive Herd Simulation This notebook simulates the collective movement of a sheep herd using a force-directed model. Each sheep is represented as a node connected to a few randomly assigned neighbors, which models “family” or local group interactions. Sheep repel each other to maintain spacing, and the entire herd exhibits emergent flocking behavior. When a “threat” (simulated by the mouse pointer) enters the field, nearby sheep are repelled and tend to cluster together for safety, mimicking natural avoidance behavior. The simulation demonstrates how simple local interaction rules can produce realistic group dynamics, while remaining computationally efficient through sparse random connections. ## How to Play 1. Move the mouse inside the simulation field to simulate a threat. 2. Observe the herd: sheep near the mouse will scatter and the group will tighten together. 3. Relax the mouse by moving it out of the field: sheep return to calm, random wandering behavior. 4. Optionally, drag individual sheep to interact manually with the simulation.33:T23bc,chart = { // Specify the dimensions of the chart. const height = (width * 9) / 16; // Map node coord into svg coord const mapScale = 2, mapX = d3 .scaleLinear() .domain([-width * mapScale, width * mapScale]) .range([0, width]), mapY = d3 .scaleLinear() .domain([-height * mapScale, height * mapScale]) .range([0, height]); // Specify the color scale. const color = d3.scaleOrdinal(d3.schemeCategory10); // Specify the linkForceStrength const { manyBodyStrengh, linkForceStrength } = form1; // The force simulation mutates links and nodes, so create a copy // so that re-evaluating this cell produces the same result. const links = data.links.map((d) => ({ ...d })); const nodes = data.nodes.map((d) => ({ ...d })); // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // 添加背景矩形（作为第一个元素） svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#1e293b") // 背景颜色 .attr("opacity", 1); // 不透明度 const alphaLabel = svg .append("text") .attr("class", "alpha-label") .attr("x", width - 20) // 右下角 .attr("y", height - 20) .attr("text-anchor", "end") .attr("fill", "#666") .attr("font-size", "12px") .attr("font-family", "math") .text("α: 1.000"); const dangerLabel = svg .append("text") .attr("class", "alpha-label") .attr("x", width / 2) // TM .attr("y", 24) .attr("text-anchor", "end") .attr("fill", "#3a3") .attr("font-size", "24px") .attr("font-family", "fantasy") .text("Peace"); const targetCircle = svg .append("circle") .attr("r", 100) .attr( "cx", d3.scaleLinear().domain([-0.1, 1.1]).range([0, width])(Math.random()) ) .attr( "cy", d3.scaleLinear().domain([-0.1, 1.1]).range([0, height])(Math.random()) ) .attr("fill", "#aaa0") .attr("stroke", "#fff") .attr("stroke-width", 3) .attr("stroke-dasharray", "10"); // Add a line for each link, and a circle for each node. const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll() .data(links) .join("line") .attr("stroke-width", (d) => Math.sqrt(d.value)); const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll() .data(nodes) .join("circle") .attr("r", 3) .attr("fill", (d) => color(d.group)); // Create a simulation with several forces. const simulation = d3 .forceSimulation(nodes) // 添加随机位移力 - 让节点随机移动 // .force("random", randomForce(1)) .force("brownian", createBrownianForce(10)) .force( "link", d3 .forceLink(links) .id((d) => d.id) .strength(linkForceStrength * 0.1) ) .force("mouseRepulsion", mouseRepulsionForce(200, 800)) .force("charge", d3.forceManyBody().strength(manyBodyStrengh)) // .force("center", d3.forceCenter(width / 2, height / 2)) // .force("center", d3.forceCenter(0, 0)) // 添加边界力（将节点保持在画布内） .force("boundary", boundaryForce(width, height, 20)) .on("tick", ticked); // 存储 link force 的引用 let linkForce = simulation.force("link"); // 自定义边界力 function boundaryForce(width, height, padding) { return function (alpha) { let a = 10; for (let node of nodes) { // node.vx = Math.max(-10, Math.min(10, node.vx)); // node.vy = Math.max(-10, Math.min(10, node.vy)); // 边界反弹 // if (mapX(node.x) < padding) node.vx += a; // if (mapX(node.x) > width - padding) node.vx -= a; // if (mapY(node.y) < padding) node.vy += a; // if (mapY(node.y) > height - padding) node.vy -= a; let x = mapX(node.x), y = mapY(node.y); if ((x < padding) & (node.vx < 0)) node.vx *= -1; if ((x > width - padding) & (node.vx > 0)) node.vx *= -1; if ((y < padding) & (node.vy < 0)) node.vy *= -1; if ((y > height - padding) & (node.vy > 0)) node.vy *= -1; } }; } // 自定义随机力 // 直接创建一个满足 d3.force 签名的有记忆的布朗运动函数 function createBrownianForce(temperature = 0.3) { const previousVx = new Map(); const previousVy = new Map(); return function (alpha) { nodes.forEach((node) => { const prevVx = previousVx.get(node) || 0; const prevVy = previousVy.get(node) || 0; const randomFactor = temperature * (0.3 + alpha) * mouseActive ? 0.1 : 1; node.vx = prevVx * 0.8 + (Math.random() - 0.5) * randomFactor; node.vy = prevVy * 0.8 + (Math.random() - 0.5) * randomFactor; previousVx.set(node, node.vx); previousVy.set(node, node.vy); }); }; } let mouseActive = false; function mouseRepulsionForce(strength = -0.3, radius = 80) { let mouseX = 0; let mouseY = 0; svg.on("mousemove", function (event) { // Read the mouse position [mouseX, mouseY] = d3.pointer(event, this); // Convert the mouse position into force space mouseX = mapX.invert(mouseX); mouseY = mapY.invert(mouseY); mouseActive = true; linkForce.strength(linkForceStrength); dangerLabel.text("Danger").attr("fill", "#f00"); if (!event.active) simulation.alphaTarget(0.3).restart(); }); svg.on("mouseleave", () => { mouseActive = false; linkForce.strength(linkForceStrength * 0.1); dangerLabel.text("Peace").attr("fill", "#3a3"); targetCircle .attr( "cx", d3.scaleLinear().domain([-0.1, 1.1]).range([0, width])(Math.random()) ) .attr( "cy", d3.scaleLinear().domain([-0.1, 1.1]).range([0, height])(Math.random()) ); if (!event.active) simulation.alphaTarget(0.1).restart(); }); return function (alpha) { if (!mouseActive) return; const currentStrength = strength * alpha; nodes.forEach((node) => { const dx = node.x - mouseX; const dy = node.y - mouseY; const distance = Math.sqrt(dx * dx + dy * dy); // const t = Math.log(distance / radius); if (distance < radius && distance > 0) { const force = currentStrength * (1 - distance / radius); node.vx += (dx / distance) * force; node.vy += (dy / distance) * force; } }); }; } node.append("title").text((d) => d.id); // Add a drag behavior. node.call( d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended) ); // Set the position attributes of links and nodes each time the simulation ticks. function ticked() { let k = linkForce.strength()() / linkForceStrength; link .attr("x1", (d) => mapX(d.source.x)) .attr("y1", (d) => mapY(d.source.y)) .attr("x2", (d) => mapX(d.target.x)) .attr("y2", (d) => mapY(d.target.y)) .attr("stroke", (d) => d3.interpolate("#5553", "#555a")(k)); node .attr("cx", (d) => mapX(d.x)) .attr("cy", (d) => mapY(d.y)) .attr("stroke", (d) => { if (mouseActive) { let x = d.x - mapX.invert(targetCircle.attr("cx")), y = d.y - mapY.invert(targetCircle.attr("cy")), r = targetCircle.attr("r") * mapScale * 2; return Math.sqrt(x * x + y * y) < r ? "gray" : "#0000"; } else { return "white"; } return mouseActive ? "#0000" : "white"; }) .attr("fill", (d) => d3.interpolate( color(d.id), d3.interpolate( "#1e293b", "#fde68a" )(Math.pow(Math.sqrt(d.vx * d.vx, d.vy * d.vy) / 10, 0.5)) )(k) ); // 更新 alpha 值显示（保留3位小数） const alpha = simulation.alpha().toFixed(3); alphaLabel.text(`α: ${alpha}`); } // Reheat the simulation when drag starts, and fix the subject position. function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } // Update the subject (dragged node) position during drag. function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } // Restore the target alpha so the simulation cools after dragging ends. // Unfix the subject position now that it’s no longer being dragged. function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } // When this cell is re-run, stop the previous simulation. (This doesn’t // really matter since the target alpha is zero and the simulation will // stop naturally, but it’s a good practice.) invalidation.then(() => simulation.stop()); return svg.node(); }34:[{"id":"31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052","href":"https://static.observableusercontent.com/files/31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052","name":"miserables.json","type":"application/octet-stream","lastModified":1770208198641.13,"size":18844}] 30:{"id":"44bab3793bc24dbe","slug":"interactive-herd-simulation","title":"Selfish Sheep: Interactive Herd Simulation","thumbnail":"a11aa861b2ac3489e7d02f15cca157fbf5e9766489c2741ad9773b25f012be56","access_level":"public","create_time":"$D2026-02-04T12:29:58.641Z","update_time":"$D2026-02-05T09:13:17.179Z","view_time":null,"first_public_time":"$D2026-02-04T13:41:18.508Z","has_unpublished_edits":null,"fork":{"id":"2ae6ac9bd33574c4","slug":"force-directed-graph/2","title":"Force-directed graph","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":2,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":494,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"},{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Selfish Sheep: Interactive Herd Simulation","cells":[{"id":1,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"viewof form = Inputs.form({\n nNodes: Inputs.range([50, 300], { label: \"nNodes\", step: 1 }),\n nLinks: Inputs.range([500, 1500], { label: \"nLinks\", step: 1, value: 1000 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"viewof form1 = Inputs.form({\n manyBodyStrengh: Inputs.range([-10, -200], {\n label: \"manyBodyStrengh (Larger abs, larger repel)\",\n step: 1\n }),\n linkForceStrength: Inputs.range([0.001, 0.1], {\n label: \"linkForceStrengh\",\n step: 0.001\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"d3.interpolate(\"#333\", \"#000\")(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"data = {\n let { nNodes, nLinks } = form;\n\n let nodes = [],\n links = [];\n\n let rnd = d3.randomUniform(1);\n\n for (let i = 0; i < nNodes; ++i) {\n nodes.push({ id: i, group: i % 10 });\n }\n\n nodes.map((a, i) => {\n nodes.slice(i).map((b) => {\n if (rnd() < (nLinks / nNodes / nNodes) * 2) {\n links.push({ source: a.id, target: b.id, value: rnd() });\n }\n });\n });\n\n d3.shuffle(links);\n links = links.slice(0, nLinks);\n\n return { nodes, links };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"data1 = FileAttachment(\"miserables.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"