[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KG44FAPET8GGPB09CTRY7G":3,"skill-same:01M6KG44FAPET8GGPB09CTRY7G":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},"01M6KG44FAPET8GGPB09CTRY7G","run2_d3-force-clustering",null,"Advanced clustering techniques in D3.js force simulations for compact and aesthetically pleasing layouts.","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-gemini-3-flash-preview\u002Fstock-data-visualization\u002Frun2_d3-force-clustering\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26],"clustering","d3","d3 force clustering","run2 d3 force clustering","js","compact","advanced","techniques","for","2026-11-10 10:12:30",false,"---\nname: run2_d3-force-clustering\ndescription: Advanced clustering techniques in D3.js force simulations for compact and aesthetically pleasing layouts.\n---\n\n# Advanced D3 Force Clustering\n\nThis skill focuses on creating compact, sector-based clusters that are visually grouped but centrally located.\n\n## Dynamic Cluster Centers\n\nInstead of a rigid grid, use a radial layout or a packed grid for cluster centers to keep them \"close together\".\n\n```javascript\nconst clusterCenters = sectors.map((s, i) => {\n    const angle = (i \u002F sectors.length) * 2 * Math.PI;\n    const radius = 150; \u002F\u002F Distance from center\n    return {\n        sector: s,\n        x: width \u002F 2 + radius * Math.cos(angle),\n        y: height \u002F 2 + radius * Math.sin(angle)\n    };\n});\n```\n\n## Collision with Padding\n\nEnsure bubbles don't overlap by adding padding to the collision force.\n\n```javascript\nsimulation.force(\"collide\", d3.forceCollide().radius(d => getRadius(d) + 2).iterations(4));\n```\n\n## Grouping Forces\n\nApply forces that pull nodes towards their specific cluster center.\n\n```javascript\nsimulation\n    .force(\"x\", d3.forceX(d => centers[d.sector].x).strength(0.2))\n    .force(\"y\", d3.forceY(d => centers[d.sector].y).strength(0.2))\n    .force(\"center\", d3.forceCenter(width \u002F 2, height \u002F 2));\n```\n","# Advanced D3 Force Clustering\n\nThis skill focuses on creating compact, sector-based clusters that are visually grouped but centrally located.\n\n## Dynamic Cluster Centers\n\nInstead of a rigid grid, use a radial layout or a packed grid for cluster centers to keep them \"close together\".\n\n```javascript\nconst clusterCenters = sectors.map((s, i) => {\n    const angle = (i \u002F sectors.length) * 2 * Math.PI;\n    const radius = 150; \u002F\u002F Distance from center\n    return {\n        sector: s,\n        x: width \u002F 2 + radius * Math.cos(angle),\n        y: height \u002F 2 + radius * Math.sin(angle)\n    };\n});\n```\n\n## Collision with Padding\n\nEnsure bubbles don't overlap by adding padding to the collision force.\n\n```javascript\nsimulation.force(\"collide\", d3.forceCollide().radius(d => getRadius(d) + 2).iterations(4));\n```\n\n## Grouping Forces\n\nApply forces that pull nodes towards their specific cluster center.\n\n```javascript\nsimulation\n    .force(\"x\", d3.forceX(d => centers[d.sector].x).strength(0.2))\n    .force(\"y\", d3.forceY(d => centers[d.sector].y).strength(0.2))\n    .force(\"center\", d3.forceCenter(width \u002F 2, height \u002F 2));\n```\n",{"name":5,"description":7},"main","726e1f79b96b0cb3d729d0e55a1c847e0b5353ae","skills\u002Fb2-self-feedback-gemini-3-flash-preview\u002Fstock-data-visualization\u002Frun2_d3-force-clustering",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-clustering",{"tool":46,"command":47},"bunx","bunx skills add cxcscmu\u002FSkillLearnBench --skill run2_d3-force-clustering",{"tool":49,"command":50},"pnpm","pnpm dlx skills add cxcscmu\u002FSkillLearnBench --skill run2_d3-force-clustering","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb2-self-feedback-gemini-3-flash-preview\u002Fstock-data-visualization\u002Frun2_d3-force-clustering\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"]