[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KFW87MB1VSCHCVZXFTCYDA":3,"skill-same:01M6KFW87MB1VSCHCVZXFTCYDA":54},{"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":27,"linkOnly":28,"markdownContent":29,"markdownBody":30,"frontMatter":31,"refName":32,"commitSha":33,"skillDirectory":34,"forksCount":35,"repositoryHtmlUrl":36,"repositoryHomepageUrl":37,"ownerHtmlUrl":38,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":39,"install":40,"resources":53},"01M6KFW87MB1VSCHCVZXFTCYDA","run2_d3-force-cluster",null,"D3.js v6 force simulation for clustered bubbles by category using forceX\u002FforceY anchors, forceCollide for no overlap, with truly deterministic initial positions.","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\u002Fb2-self-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun2_d3-force-cluster\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26],"d3","cluster","run2 d3 force cluster","simulation","js","deterministic","positions","with","for","2026-11-10 10:12:30",false,"---\nname: run2_d3-force-cluster\ndescription: D3.js v6 force simulation for clustered bubbles by category using forceX\u002FforceY anchors, forceCollide for no overlap, with truly deterministic initial positions.\n---\n\n# D3.js v6 Force Cluster Simulation (Improved)\n\n## Key Principles\n1. **Never use Math.random()** — use deterministic golden-angle spiral per sector\n2. **Run fixed ticks**, then stop — don't animate\n3. **Clamp final positions** within SVG bounds after simulation\n4. Use **forceX + forceY strength 0.10–0.15** for cohesive clusters\n\n## Sector Center Layout\nWith 5 sectors, use a ring with one sector on top and four around it:\n```javascript\nconst sectors = Object.keys(SECTOR_COLORS);  \u002F\u002F sorted, predictable\nconst W = 800, H = 600;\nconst cx = W \u002F 2, cy = H \u002F 2;\n\nconst sectorCenters = {};\nsectors.forEach((sector, i) => {\n    \u002F\u002F Elliptical placement; adjust rx\u002Fry for chart proportions\n    const angle = (i \u002F sectors.length) * 2 * Math.PI - Math.PI \u002F 2;\n    sectorCenters[sector] = {\n        x: cx + (W * 0.28) * Math.cos(angle),\n        y: cy + (H * 0.28) * Math.sin(angle)\n    };\n});\n```\n\n## Deterministic Initial Positions (Critical!)\nD3's simulation starts from node x\u002Fy. Seed them deliberately:\n```javascript\nconst sectorCounters = {};\n\u002F\u002F Sort nodes deterministically before seeding\nconst nodes = [...data].sort((a, b) => a.ticker.localeCompare(b.ticker));\nnodes.forEach(d => {\n    const center = sectorCenters[d.sector];\n    const i = sectorCounters[d.sector] = (sectorCounters[d.sector] || 0);\n    sectorCounters[d.sector]++;\n    \u002F\u002F Golden-angle spiral — fully deterministic, no Math.random()\n    const angle = i * 2.39996;   \u002F\u002F golden angle ≈ 137.5°\n    const r = 6 * Math.sqrt(i + 1);\n    d.x = center.x + r * Math.cos(angle);\n    d.y = center.y + r * Math.sin(angle);\n});\n```\n\n## Force Simulation Setup\n```javascript\nconst simulation = d3.forceSimulation(nodes)\n    .force('x', d3.forceX(d => sectorCenters[d.sector].x).strength(0.12))\n    .force('y', d3.forceY(d => sectorCenters[d.sector].y).strength(0.12))\n    .force('collide', d3.forceCollide(d => d.radius + 2).strength(1.0))\n    .force('charge', d3.forceManyBody().strength(-10))\n    .alphaDecay(0.02)\n    .stop();  \u002F\u002F Don't auto-run\n\n\u002F\u002F Run exactly 400 ticks for determinism\nfor (let i = 0; i \u003C 400; i++) simulation.tick();\n\n\u002F\u002F Clamp to SVG bounds\nnodes.forEach(d => {\n    d.x = Math.max(d.radius + 4, Math.min(W - d.radius - 4, d.x));\n    d.y = Math.max(d.radius + 4, Math.min(H - d.radius - 4, d.y));\n});\n```\n\n## Placing SVG Elements After Simulation\nSince we stop before rendering, just set attributes directly (no ticking):\n```javascript\ncircles.attr('cx', d => d.x).attr('cy', d => d.y);\nlabels.attr('x', d => d.x).attr('y', d => d.y);\n```\n\n## Responsive SVG\nUse viewBox on the SVG and measure container at draw time:\n```javascript\nconst W = container.clientWidth || 700;\nconst H = container.clientHeight || 560;\nsvg.attr('viewBox', `0 0 ${W} ${H}`)\n   .attr('preserveAspectRatio', 'xMidYMid meet');\n```\n\n## Tuning Guidance\n- More nodes in a sector → increase `W * 0.28` slightly so clusters have more room\n- Large radius variance → reduce `forceX\u002FY strength` to 0.08 so big bubbles don't push out\n- Overlap still present → increase collide strength or reduce MAX_RADIUS\n","# D3.js v6 Force Cluster Simulation (Improved)\n\n## Key Principles\n1. **Never use Math.random()** — use deterministic golden-angle spiral per sector\n2. **Run fixed ticks**, then stop — don't animate\n3. **Clamp final positions** within SVG bounds after simulation\n4. Use **forceX + forceY strength 0.10–0.15** for cohesive clusters\n\n## Sector Center Layout\nWith 5 sectors, use a ring with one sector on top and four around it:\n```javascript\nconst sectors = Object.keys(SECTOR_COLORS);  \u002F\u002F sorted, predictable\nconst W = 800, H = 600;\nconst cx = W \u002F 2, cy = H \u002F 2;\n\nconst sectorCenters = {};\nsectors.forEach((sector, i) => {\n    \u002F\u002F Elliptical placement; adjust rx\u002Fry for chart proportions\n    const angle = (i \u002F sectors.length) * 2 * Math.PI - Math.PI \u002F 2;\n    sectorCenters[sector] = {\n        x: cx + (W * 0.28) * Math.cos(angle),\n        y: cy + (H * 0.28) * Math.sin(angle)\n    };\n});\n```\n\n## Deterministic Initial Positions (Critical!)\nD3's simulation starts from node x\u002Fy. Seed them deliberately:\n```javascript\nconst sectorCounters = {};\n\u002F\u002F Sort nodes deterministically before seeding\nconst nodes = [...data].sort((a, b) => a.ticker.localeCompare(b.ticker));\nnodes.forEach(d => {\n    const center = sectorCenters[d.sector];\n    const i = sectorCounters[d.sector] = (sectorCounters[d.sector] || 0);\n    sectorCounters[d.sector]++;\n    \u002F\u002F Golden-angle spiral — fully deterministic, no Math.random()\n    const angle = i * 2.39996;   \u002F\u002F golden angle ≈ 137.5°\n    const r = 6 * Math.sqrt(i + 1);\n    d.x = center.x + r * Math.cos(angle);\n    d.y = center.y + r * Math.sin(angle);\n});\n```\n\n## Force Simulation Setup\n```javascript\nconst simulation = d3.forceSimulation(nodes)\n    .force('x', d3.forceX(d => sectorCenters[d.sector].x).strength(0.12))\n    .force('y', d3.forceY(d => sectorCenters[d.sector].y).strength(0.12))\n    .force('collide', d3.forceCollide(d => d.radius + 2).strength(1.0))\n    .force('charge', d3.forceManyBody().strength(-10))\n    .alphaDecay(0.02)\n    .stop();  \u002F\u002F Don't auto-run\n\n\u002F\u002F Run exactly 400 ticks for determinism\nfor (let i = 0; i \u003C 400; i++) simulation.tick();\n\n\u002F\u002F Clamp to SVG bounds\nnodes.forEach(d => {\n    d.x = Math.max(d.radius + 4, Math.min(W - d.radius - 4, d.x));\n    d.y = Math.max(d.radius + 4, Math.min(H - d.radius - 4, d.y));\n});\n```\n\n## Placing SVG Elements After Simulation\nSince we stop before rendering, just set attributes directly (no ticking):\n```javascript\ncircles.attr('cx', d => d.x).attr('cy', d => d.y);\nlabels.attr('x', d => d.x).attr('y', d => d.y);\n```\n\n## Responsive SVG\nUse viewBox on the SVG and measure container at draw time:\n```javascript\nconst W = container.clientWidth || 700;\nconst H = container.clientHeight || 560;\nsvg.attr('viewBox', `0 0 ${W} ${H}`)\n   .attr('preserveAspectRatio', 'xMidYMid meet');\n```\n\n## Tuning Guidance\n- More nodes in a sector → increase `W * 0.28` slightly so clusters have more room\n- Large radius variance → reduce `forceX\u002FY strength` to 0.08 so big bubbles don't push out\n- Overlap still present → increase collide strength or reduce MAX_RADIUS\n",{"name":5,"description":7},"main","726e1f79b96b0cb3d729d0e55a1c847e0b5353ae","skills\u002Fb2-self-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun2_d3-force-cluster",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":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add cxcscmu\u002FSkillLearnBench --skill run2_d3-force-cluster",{"tool":46,"command":47},"bunx","bunx skills add cxcscmu\u002FSkillLearnBench --skill run2_d3-force-cluster",{"tool":49,"command":50},"pnpm","pnpm dlx skills add cxcscmu\u002FSkillLearnBench --skill run2_d3-force-cluster","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb2-self-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun2_d3-force-cluster\u002FSKILL.md",true,[],[55,73,97,115,135,147],{"skillNo":56,"name":57,"nameZh":6,"description":58,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":66,"publishedAt":27},"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",[61],{"categoryNo":62,"categoryName":63,"taxonomyType":64,"taxonomyTypeDesc":65},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[67,68,69,70,71,72],"object counter","object","vision","computer","Computer Vision","image",{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":82,"publishedAt":27},"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",[79],{"categoryNo":80,"categoryName":81,"taxonomyType":64,"taxonomyTypeDesc":65},"01JBSEEDCAT000000000000023","Skill与智能体开发",[83,84,85,86,87,88,89,90,91,26,92,93,94,95,96],"workflow","planning","planning workflow","travel","travel planning","travel planning workflow","structured","performing","plan","user","it","requirements","essential","itineraries",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":27},"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",[],[104,105,106,107,108,109,110,86,111,112,87,113,26,114,84],"search","tool","dataset","bundled dataset search tool","restaurants","Tools","up","look","flights","you","database",{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":27},"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",[],[122,123,124,26,125,126,127,128,129,130,131,132,113,133,134],"glm output","output","glm","tasks","metrics","json","basics","guidance","matching","verifier","processing","root","calibration",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":142,"publishedAt":27},"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",[141],{"categoryNo":80,"categoryName":81,"taxonomyType":64,"taxonomyTypeDesc":65},[143,134,124,123,129,128,125,144,145,26,146],"glm calibration","setup","companion","metric",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":153,"publishedAt":27},"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",[],[154,124,128,155,143,134,26,123,156,157,158,159,160,161,125],"glm basics","inspect","relevant","files","good","use","how","Evaluation"]