[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KD9JSFK45XABT7BCPWP5XZ":3,"skill-same:01M6KD9JSFK45XABT7BCPWP5XZ":57},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":30,"linkOnly":31,"markdownContent":32,"markdownBody":33,"frontMatter":34,"refName":35,"commitSha":36,"skillDirectory":37,"forksCount":38,"repositoryHtmlUrl":39,"repositoryHomepageUrl":40,"ownerHtmlUrl":41,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":42,"install":43,"resources":56},"01M6KD9JSFK45XABT7BCPWP5XZ","d3-force-simulation",null,"D3.js force simulation for creating interactive bubble charts with clustering, collision detection, and physics-based positioning","cxcscmu\u002FSkillLearnBench","cxcscmu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F142838272?v=4","01M6KCQDFQWPDSN0MKZY96MSQP","01M6KCQDM7G70TKJ28NTSQC0RZ",92,"MIT","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb1-one-shot-claude-haiku-4-5\u002Fstock-data-visualization\u002Fd3-force-simulation\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29],"simulation","d3","d3 force simulation","clustering","detection","Charts","js","interactive","positioning","physics","with","for","2026-11-10 10:12:30",false,"---\nname: d3-force-simulation\ndescription: D3.js force simulation for creating interactive bubble charts with clustering, collision detection, and physics-based positioning\n---\n\n# D3.js Force Simulation\n\n## Overview\nForce simulation in D3 uses physics-based algorithms to position nodes (bubbles) based on forces. Perfect for creating bubble charts with natural-looking clusters.\n\n## Core Concepts\n\n### 1. Creating a Simulation\n```javascript\nconst simulation = d3.forceSimulation(nodes)\n  .force(\"name\", forceFunction)\n  .on(\"tick\", updatePositions);\n\n\u002F\u002F Start simulation (runs in background)\nsimulation.alpha(1);  \u002F\u002F reset energy\n```\n\n### 2. Common Forces\n\n#### forceX \u002F forceY\nPosition bubbles toward target x\u002Fy coordinates (creates clustering):\n\n```javascript\n\u002F\u002F Group by sector - each sector gets target x position\nconst sectors = Array.from(new Set(data.map(d => d.sector)));\nconst sectorX = d3.scalePoint()\n  .domain(sectors)\n  .range([0, width]);\n\nconst simulation = d3.forceSimulation(nodes)\n  .force(\"x\", d3.forceX()\n    .x(d => sectorX(d.sector))  \u002F\u002F each sector pulled to its x position\n    .strength(0.05)              \u002F\u002F weak force (allows spreading)\n  )\n  .force(\"y\", d3.forceY()\n    .y(height \u002F 2)               \u002F\u002F all centered vertically\n    .strength(0.03)\n  );\n```\n\n#### forceCollide\nPrevents bubbles from overlapping:\n\n```javascript\n.force(\"collide\", d3.forceCollide()\n  .radius(d => radiusScale(d.marketCap) + 2)  \u002F\u002F add padding\n  .strength(0.5)  \u002F\u002F collision strength (0-1)\n)\n```\n\n#### forceManyBody\nRepulsive or attractive force between all nodes:\n\n```javascript\n.force(\"charge\", d3.forceManyBody()\n  .strength(-50)  \u002F\u002F negative = repulsion, positive = attraction\n)\n```\n\n### 3. Tick Events\nUpdate positions on each simulation frame:\n\n```javascript\nsimulation.on(\"tick\", () => {\n  \u002F\u002F Update circles\n  circles\n    .attr(\"cx\", d => d.x)\n    .attr(\"cy\", d => d.y);\n\n  \u002F\u002F Update text\n  labels\n    .attr(\"x\", d => d.x)\n    .attr(\"y\", d => d.y);\n});\n```\n\n### 4. Preventing Bubbles from Moving Off-Screen\n\nFix nodes to boundaries:\n\n```javascript\nsimulation.on(\"tick\", () => {\n  nodes.forEach(d => {\n    \u002F\u002F Clamp positions within bounds\n    d.x = Math.max(d.radius, Math.min(width - d.radius, d.x));\n    d.y = Math.max(d.radius, Math.min(height - d.radius, d.y));\n  });\n\n  \u002F\u002F Update positions\n  circles.attr(\"cx\", d => d.x).attr(\"cy\", d => d.y);\n});\n```\n\n### 5. Interactive Dragging\nAllow users to drag nodes:\n\n```javascript\nfunction drag(simulation) {\n  return d3.drag()\n    .on(\"start\", (event, d) => {\n      if (!event.active) simulation.alphaTarget(0.3).restart();\n      d.fx = d.x;\n      d.fy = d.y;\n    })\n    .on(\"drag\", (event, d) => {\n      d.fx = event.x;\n      d.fy = event.y;\n    })\n    .on(\"end\", (event, d) => {\n      if (!event.active) simulation.alphaTarget(0);\n      d.fx = null;\n      d.fy = null;\n    });\n}\n\ncircles.call(drag(simulation));\n```\n\n## Complete Example: Bubble Cluster Chart\n\n```javascript\n\u002F\u002F Setup\nconst nodes = data.map(d => ({\n  id: d.ticker,\n  sector: d.sector,\n  value: d.marketCap,\n  radius: Math.sqrt(d.marketCap \u002F Math.PI)\n}));\n\nconst width = 800, height = 600;\n\n\u002F\u002F Scales\nconst sectorX = d3.scalePoint()\n  .domain(Array.from(new Set(data.map(d => d.sector))))\n  .range([100, width - 100]);\n\nconst radiusScale = d3.scaleSqrt()\n  .domain([0, d3.max(nodes, d => d.value)])\n  .range([5, 50]);\n\nconst colorScale = d3.scaleOrdinal()\n  .domain(Array.from(new Set(data.map(d => d.sector))))\n  .range(d3.schemeCategory10);\n\n\u002F\u002F Simulation\nconst simulation = d3.forceSimulation(nodes)\n  .force(\"x\", d3.forceX().x(d => sectorX(d.sector)).strength(0.05))\n  .force(\"y\", d3.forceY().y(height \u002F 2).strength(0.03))\n  .force(\"collide\", d3.forceCollide().radius(d => radiusScale(d.value) + 2))\n  .force(\"charge\", d3.forceManyBody().strength(-30))\n  .on(\"tick\", () => {\n    circles\n      .attr(\"cx\", d => d.x)\n      .attr(\"cy\", d => d.y);\n  });\n\n\u002F\u002F Render\nconst svg = d3.select(\"body\").append(\"svg\")\n  .attr(\"width\", width).attr(\"height\", height);\n\nconst circles = svg.selectAll(\"circle\")\n  .data(nodes)\n  .join(\"circle\")\n  .attr(\"r\", d => radiusScale(d.value))\n  .attr(\"fill\", d => colorScale(d.sector));\n```\n\n## Performance Tips\n- Use `simulation.alphaMin(0.001)` to stop simulation faster\n- Reduce `strength` values for smoother settling\n- Use `radius` in forceCollide matching actual visual radius\n- Call `simulation.stop()` when not needed to save CPU\n","# D3.js Force Simulation\n\n## Overview\nForce simulation in D3 uses physics-based algorithms to position nodes (bubbles) based on forces. Perfect for creating bubble charts with natural-looking clusters.\n\n## Core Concepts\n\n### 1. Creating a Simulation\n```javascript\nconst simulation = d3.forceSimulation(nodes)\n  .force(\"name\", forceFunction)\n  .on(\"tick\", updatePositions);\n\n\u002F\u002F Start simulation (runs in background)\nsimulation.alpha(1);  \u002F\u002F reset energy\n```\n\n### 2. Common Forces\n\n#### forceX \u002F forceY\nPosition bubbles toward target x\u002Fy coordinates (creates clustering):\n\n```javascript\n\u002F\u002F Group by sector - each sector gets target x position\nconst sectors = Array.from(new Set(data.map(d => d.sector)));\nconst sectorX = d3.scalePoint()\n  .domain(sectors)\n  .range([0, width]);\n\nconst simulation = d3.forceSimulation(nodes)\n  .force(\"x\", d3.forceX()\n    .x(d => sectorX(d.sector))  \u002F\u002F each sector pulled to its x position\n    .strength(0.05)              \u002F\u002F weak force (allows spreading)\n  )\n  .force(\"y\", d3.forceY()\n    .y(height \u002F 2)               \u002F\u002F all centered vertically\n    .strength(0.03)\n  );\n```\n\n#### forceCollide\nPrevents bubbles from overlapping:\n\n```javascript\n.force(\"collide\", d3.forceCollide()\n  .radius(d => radiusScale(d.marketCap) + 2)  \u002F\u002F add padding\n  .strength(0.5)  \u002F\u002F collision strength (0-1)\n)\n```\n\n#### forceManyBody\nRepulsive or attractive force between all nodes:\n\n```javascript\n.force(\"charge\", d3.forceManyBody()\n  .strength(-50)  \u002F\u002F negative = repulsion, positive = attraction\n)\n```\n\n### 3. Tick Events\nUpdate positions on each simulation frame:\n\n```javascript\nsimulation.on(\"tick\", () => {\n  \u002F\u002F Update circles\n  circles\n    .attr(\"cx\", d => d.x)\n    .attr(\"cy\", d => d.y);\n\n  \u002F\u002F Update text\n  labels\n    .attr(\"x\", d => d.x)\n    .attr(\"y\", d => d.y);\n});\n```\n\n### 4. Preventing Bubbles from Moving Off-Screen\n\nFix nodes to boundaries:\n\n```javascript\nsimulation.on(\"tick\", () => {\n  nodes.forEach(d => {\n    \u002F\u002F Clamp positions within bounds\n    d.x = Math.max(d.radius, Math.min(width - d.radius, d.x));\n    d.y = Math.max(d.radius, Math.min(height - d.radius, d.y));\n  });\n\n  \u002F\u002F Update positions\n  circles.attr(\"cx\", d => d.x).attr(\"cy\", d => d.y);\n});\n```\n\n### 5. Interactive Dragging\nAllow users to drag nodes:\n\n```javascript\nfunction drag(simulation) {\n  return d3.drag()\n    .on(\"start\", (event, d) => {\n      if (!event.active) simulation.alphaTarget(0.3).restart();\n      d.fx = d.x;\n      d.fy = d.y;\n    })\n    .on(\"drag\", (event, d) => {\n      d.fx = event.x;\n      d.fy = event.y;\n    })\n    .on(\"end\", (event, d) => {\n      if (!event.active) simulation.alphaTarget(0);\n      d.fx = null;\n      d.fy = null;\n    });\n}\n\ncircles.call(drag(simulation));\n```\n\n## Complete Example: Bubble Cluster Chart\n\n```javascript\n\u002F\u002F Setup\nconst nodes = data.map(d => ({\n  id: d.ticker,\n  sector: d.sector,\n  value: d.marketCap,\n  radius: Math.sqrt(d.marketCap \u002F Math.PI)\n}));\n\nconst width = 800, height = 600;\n\n\u002F\u002F Scales\nconst sectorX = d3.scalePoint()\n  .domain(Array.from(new Set(data.map(d => d.sector))))\n  .range([100, width - 100]);\n\nconst radiusScale = d3.scaleSqrt()\n  .domain([0, d3.max(nodes, d => d.value)])\n  .range([5, 50]);\n\nconst colorScale = d3.scaleOrdinal()\n  .domain(Array.from(new Set(data.map(d => d.sector))))\n  .range(d3.schemeCategory10);\n\n\u002F\u002F Simulation\nconst simulation = d3.forceSimulation(nodes)\n  .force(\"x\", d3.forceX().x(d => sectorX(d.sector)).strength(0.05))\n  .force(\"y\", d3.forceY().y(height \u002F 2).strength(0.03))\n  .force(\"collide\", d3.forceCollide().radius(d => radiusScale(d.value) + 2))\n  .force(\"charge\", d3.forceManyBody().strength(-30))\n  .on(\"tick\", () => {\n    circles\n      .attr(\"cx\", d => d.x)\n      .attr(\"cy\", d => d.y);\n  });\n\n\u002F\u002F Render\nconst svg = d3.select(\"body\").append(\"svg\")\n  .attr(\"width\", width).attr(\"height\", height);\n\nconst circles = svg.selectAll(\"circle\")\n  .data(nodes)\n  .join(\"circle\")\n  .attr(\"r\", d => radiusScale(d.value))\n  .attr(\"fill\", d => colorScale(d.sector));\n```\n\n## Performance Tips\n- Use `simulation.alphaMin(0.001)` to stop simulation faster\n- Reduce `strength` values for smoother settling\n- Use `radius` in forceCollide matching actual visual radius\n- Call `simulation.stop()` when not needed to save CPU\n",{"name":5,"description":7},"main","726e1f79b96b0cb3d729d0e55a1c847e0b5353ae","skills\u002Fb1-one-shot-claude-haiku-4-5\u002Fstock-data-visualization\u002Fd3-force-simulation",7,"https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench","https:\u002F\u002Fcxcscmu.github.io\u002FSkillLearnBench","https:\u002F\u002Fgithub.com\u002Fcxcscmu","2026-10-02 22:55:36",{"source":8,"skillName":5,"commands":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add cxcscmu\u002FSkillLearnBench --skill d3-force-simulation",{"tool":49,"command":50},"bunx","bunx skills add cxcscmu\u002FSkillLearnBench --skill d3-force-simulation",{"tool":52,"command":53},"pnpm","pnpm dlx skills add cxcscmu\u002FSkillLearnBench --skill d3-force-simulation","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb1-one-shot-claude-haiku-4-5\u002Fstock-data-visualization\u002Fd3-force-simulation\u002FSKILL.md",true,[],[58,76,100,118,138,150],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":69,"publishedAt":30},"01M6KM5KH175P5ABP5JMX2SBDQ","object_counter","Count occurrences of an object in the image using computer vision algorithm.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Fvideo-object-counting\u002Fobject_counter\u002FSKILL.md",[64],{"categoryNo":65,"categoryName":66,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[70,71,72,73,74,75],"object counter","object","vision","computer","Computer Vision","image",{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":85,"publishedAt":30},"01M6KM51TMVXG79MMPCS6Y8G86","travel-planning-workflow","Invoke this skill when performing travel planning. It defines a structured workflow for generating itineraries. Following this workflow is essential to ensure the final plan satisfies user requirements.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftravel-planning\u002Ftravel-planning-workflow\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000023","Skill与智能体开发",[86,87,88,89,90,91,92,93,94,29,95,96,97,98,99],"workflow","planning","planning workflow","travel","travel planning","travel planning workflow","structured","performing","plan","user","it","requirements","essential","itineraries",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":30},"01M6KM4DY820XHS9YTSK5QP5HD","bundled-dataset-search-tool","invoke this skill when you need to perform database search for travel planning. This skill provides some useful pre-packaged tools to look up accommodations, attractions, cities, driving distance, flights, and restaurants from the bundled dataset.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftravel-planning\u002Fbundled-dataset-search-tool\u002FSKILL.md",[],[107,108,109,110,111,112,113,89,114,115,90,116,29,117,87],"search","tool","dataset","bundled dataset search tool","restaurants","Tools","up","look","flights","you","database",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":30},"01M6KM465BB9PQ0B548HQSVAWZ","glm-output","Output-processing guidance for GLM tasks. Especially useful after glm-basics and glm-calibration when you need verifier-matching metrics from output.nc and a final \u002Froot\u002Fmetrics.json.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftemperature-simulation\u002Fglm-output\u002FSKILL.md",[],[125,126,127,29,128,129,130,131,132,133,134,135,116,136,137],"glm output","output","glm","tasks","metrics","json","basics","guidance","matching","verifier","processing","root","calibration",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":145,"publishedAt":30},"01M6KM40KY3QWDW5W97S39R2BC","glm-calibration","Calibration guidance for GLM tasks. Often most effective after glm-basics has clarified the setup; glm-output is the companion skill for exact final metric computation.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftemperature-simulation\u002Fglm-calibration\u002FSKILL.md",[144],{"categoryNo":83,"categoryName":84,"taxonomyType":67,"taxonomyTypeDesc":68},[146,137,127,126,132,131,128,147,148,29,149],"glm calibration","setup","companion","metric",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":156,"publishedAt":30},"01M6KM3VHHVSGMGHJQB3PPT6YG","glm-basics","A good starting point for GLM calibration tasks. Use to inspect glm3.nml, confirm how GLM runs, and identify the relevant files before moving on to calibration and output evaluation.","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fhuman_authored\u002Ftemperature-simulation\u002Fglm-basics\u002FSKILL.md",[],[157,127,131,158,146,137,29,126,159,160,161,162,163,164,128],"glm basics","inspect","relevant","files","good","use","how","Evaluation"]