[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KDQCCW0T57NQA35ZPWRFEX":3,"skill-same:01M6KDQCCW0T57NQA35ZPWRFEX":64},{"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":27,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":47,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M6KDQCCW0T57NQA35ZPWRFEX","d3-force-bubble-chart",null,"Create force-simulation bubble charts with D3.js v6, including sector clustering, collision avoidance, tooltips, and legends.","cxcscmu\u002FSkillLearnBench","cxcscmu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F142838272?v=4","01M6KCQDFQWPDSN0MKZY96MSQP","01M6KCQDM7G70TKJ28NTSQC0RZ",93,"MIT","https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb1-one-shot-claude-opus-4-6\u002Fstock-data-visualization\u002Fd3-force-bubble-chart\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36],"chart","d3","d3 force bubble chart","create","clustering","Charts","simulation","js","with","2026-11-10 10:12:30",false,"---\nname: d3-force-bubble-chart\ndescription: Create force-simulation bubble charts with D3.js v6, including sector clustering, collision avoidance, tooltips, and legends.\n---\n\n# D3.js v6 Force-Simulation Bubble Chart\n\n## Key Concepts\n- Use `d3.forceSimulation()` with `forceX`, `forceY`, `forceCollide`, and `forceManyBody` to position bubbles.\n- Cluster by category using `forceX(sectorX).strength(...)` and `forceY(sectorY).strength(...)`.\n- Size bubbles via a `d3.scaleSqrt()` mapped from data (e.g., market cap) to radius.\n- Color bubbles via `d3.scaleOrdinal(d3.schemeTableau10)` keyed on sector.\n\n## Force Simulation Pattern\n\n```js\nconst simulation = d3.forceSimulation(data)\n  .force(\"x\", d3.forceX(d => sectorX(d.sector)).strength(0.3))\n  .force(\"y\", d3.forceY(d => sectorY(d.sector)).strength(0.3))\n  .force(\"collide\", d3.forceCollide(d => radiusScale(d.marketCap) + 1.5))\n  .force(\"charge\", d3.forceManyBody().strength(-2))\n  .on(\"tick\", ticked);\n```\n\n## Sector Clustering\nAssign each sector a target (x, y) position to group bubbles:\n```js\nconst sectors = [...new Set(data.map(d => d.sector))];\nconst sectorPositions = {};\nsectors.forEach((s, i) => {\n  const angle = (2 * Math.PI * i) \u002F sectors.length;\n  sectorPositions[s] = {\n    x: centerX + clusterRadius * Math.cos(angle),\n    y: centerY + clusterRadius * Math.sin(angle)\n  };\n});\n```\n\n## Tooltips\nUse a `div.tooltip` with `position: absolute` and `pointer-events: none`. Show on mouseover, hide on mouseout.\n\n## Legend\nRender colored rectangles + text labels for each sector using SVG `\u003Cg>` elements.\n","# D3.js v6 Force-Simulation Bubble Chart\n\n## Key Concepts\n- Use `d3.forceSimulation()` with `forceX`, `forceY`, `forceCollide`, and `forceManyBody` to position bubbles.\n- Cluster by category using `forceX(sectorX).strength(...)` and `forceY(sectorY).strength(...)`.\n- Size bubbles via a `d3.scaleSqrt()` mapped from data (e.g., market cap) to radius.\n- Color bubbles via `d3.scaleOrdinal(d3.schemeTableau10)` keyed on sector.\n\n## Force Simulation Pattern\n\n```js\nconst simulation = d3.forceSimulation(data)\n  .force(\"x\", d3.forceX(d => sectorX(d.sector)).strength(0.3))\n  .force(\"y\", d3.forceY(d => sectorY(d.sector)).strength(0.3))\n  .force(\"collide\", d3.forceCollide(d => radiusScale(d.marketCap) + 1.5))\n  .force(\"charge\", d3.forceManyBody().strength(-2))\n  .on(\"tick\", ticked);\n```\n\n## Sector Clustering\nAssign each sector a target (x, y) position to group bubbles:\n```js\nconst sectors = [...new Set(data.map(d => d.sector))];\nconst sectorPositions = {};\nsectors.forEach((s, i) => {\n  const angle = (2 * Math.PI * i) \u002F sectors.length;\n  sectorPositions[s] = {\n    x: centerX + clusterRadius * Math.cos(angle),\n    y: centerY + clusterRadius * Math.sin(angle)\n  };\n});\n```\n\n## Tooltips\nUse a `div.tooltip` with `position: absolute` and `pointer-events: none`. Show on mouseover, hide on mouseout.\n\n## Legend\nRender colored rectangles + text labels for each sector using SVG `\u003Cg>` elements.\n",{"name":5,"description":7},"main","726e1f79b96b0cb3d729d0e55a1c847e0b5353ae","skills\u002Fb1-one-shot-claude-opus-4-6\u002Fstock-data-visualization\u002Fd3-force-bubble-chart",8,"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":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add cxcscmu\u002FSkillLearnBench --skill d3-force-bubble-chart",{"tool":56,"command":57},"bunx","bunx skills add cxcscmu\u002FSkillLearnBench --skill d3-force-bubble-chart",{"tool":59,"command":60},"pnpm","pnpm dlx skills add cxcscmu\u002FSkillLearnBench --skill d3-force-bubble-chart","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb1-one-shot-claude-opus-4-6\u002Fstock-data-visualization\u002Fd3-force-bubble-chart\u002FSKILL.md",true,[],[65,81,106,124,144,156],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":74,"publishedAt":37},"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",[71],{"categoryNo":72,"categoryName":73,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[75,76,77,78,79,80],"object counter","object","vision","computer","Computer Vision","image",{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":90,"publishedAt":37},"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",[87],{"categoryNo":88,"categoryName":89,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[91,92,93,94,95,96,97,98,99,100,101,102,103,104,105],"workflow","planning","planning workflow","travel","travel planning","travel planning workflow","structured","performing","plan","for","user","it","requirements","essential","itineraries",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":37},"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",[],[113,114,115,116,117,118,119,94,120,121,95,122,100,123,92],"search","tool","dataset","bundled dataset search tool","restaurants","Tools","up","look","flights","you","database",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":37},"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",[],[131,132,133,100,134,135,136,137,138,139,140,141,122,142,143],"glm output","output","glm","tasks","metrics","json","basics","guidance","matching","verifier","processing","root","calibration",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":151,"publishedAt":37},"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",[150],{"categoryNo":88,"categoryName":89,"taxonomyType":20,"taxonomyTypeDesc":21},[152,143,133,132,138,137,134,153,154,100,155],"glm calibration","setup","companion","metric",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":162,"publishedAt":37},"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",[],[163,133,137,164,152,143,100,132,165,166,167,168,169,170,134],"glm basics","inspect","relevant","files","good","use","how","Evaluation"]