[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KHDW4KEFZPTE5RCRWFDEEW":3,"skill-same:01M6KHDW4KEFZPTE5RCRWFDEEW":68},{"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":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":49,"repositoryHtmlUrl":50,"repositoryHomepageUrl":51,"ownerHtmlUrl":52,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":53,"install":54,"resources":67},"01M6KHDW4KEFZPTE5RCRWFDEEW","build-d3-bubble-chart-with-force-simulation",null,"Use when building a D3.js v6 bubble chart with force simulation, sector clustering, collision detection, tooltips, and interactive highlighting. Handles ETFs (no marketCap\u002Fsector) as a separate cluster.","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\u002Fb3-teacher-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun3_build-d3-bubble-chart-with-force-simulation\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,37,38,39,40],"simulation","build","chart","d3","with","build d3 bubble chart with force simulation","clustering","detection","js","interactive","use","as","cluster","2026-11-10 10:12:30",false,"---\nname: build-d3-bubble-chart-with-force-simulation\ndescription: Use when building a D3.js v6 bubble chart with force simulation, sector clustering, collision detection, tooltips, and interactive highlighting. Handles ETFs (no marketCap\u002Fsector) as a separate cluster.\n---\n\n# D3 v6 Bubble Chart with Force Simulation\n\n## Key Requirements\n- Bubbles sized by `marketCap` (ETFs get uniform size)\n- Colored by sector; ETFs assigned sector `'ETF'` as fallback\n- Force simulation with `forceX`\u002F`forceY` pulling toward cluster centers\n- `forceCollide` prevents overlap\n- Pre-tick simulation with `.stop()` + `.tick(N)` for static initial render\n- Tooltip on hover for non-ETF stocks only (detected by `!d.marketCap`)\n- Click interaction highlights corresponding table row\n\n## ETF Handling Pattern\n```javascript\n\u002F\u002F In data loading — assign fallback sector BEFORE building clusterCenters\ndata.forEach(d => {\n  if (!d.sector || d.sector.trim() === '') {\n    d.sector = 'ETF';\n  }\n  \u002F\u002F Parse marketCap as number if present\n  d.marketCapNum = d.marketCap ? parseFloat(d.marketCap) : null;\n});\n```\n\n## Cluster Centers Pattern\n```javascript\nconst sectors = [...new Set(data.map(d => d.sector))];\nconst numSectors = sectors.length;\n\u002F\u002F Arrange cluster centers in a grid or circle\nconst clusterCenters = {};\nsectors.forEach((sector, i) => {\n  const angle = (i \u002F numSectors) * 2 * Math.PI;\n  clusterCenters[sector] = {\n    x: innerW \u002F 2 + (innerW * 0.35) * Math.cos(angle),\n    y: innerH \u002F 2 + (innerH * 0.35) * Math.sin(angle)\n  };\n});\n```\n\n## Force Simulation Pattern\n```javascript\nconst simulation = d3.forceSimulation(data)\n  .force('x', d3.forceX(d => clusterCenters[d.sector].x).strength(0.15))\n  .force('y', d3.forceY(d => clusterCenters[d.sector].y).strength(0.15))\n  .force('collide', d3.forceCollide(d => radiusScale(d.marketCapNum || minBubbleR) + 2))\n  .stop();\n\n\u002F\u002F Pre-tick for static render\nfor (let i = 0; i \u003C 300; i++) simulation.tick();\n\n\u002F\u002F Validate positions\ndata.forEach(d => {\n  if (isNaN(d.x) || isNaN(d.y)) {\n    d.x = innerW \u002F 2;\n    d.y = innerH \u002F 2;\n  }\n});\n```\n\n## Tooltip Pattern (ETF-safe)\n```javascript\nnode.on('mouseover', function(event, d) {\n  if (!d.marketCap) return;  \u002F\u002F Skip ETFs — no marketCap means ETF\n  tooltip\n    .style('opacity', 1)\n    .html(`\u003Cstrong>${d.ticker}\u003C\u002Fstrong>\u003Cbr>${d.name}\u003Cbr>${d.sector}`)\n    .style('left', (event.pageX + 12) + 'px')\n    .style('top', (event.pageY - 28) + 'px');\n})\n.on('mouseout', function(event, d) {\n  if (!d.marketCap) return;\n  tooltip.style('opacity', 0);\n});\n```\n\n## Tooltip CSS\n```css\n.tooltip {\n  position: absolute;\n  background: rgba(0,0,0,0.75);\n  color: #fff;\n  padding: 8px 12px;\n  border-radius: 4px;\n  pointer-events: none;\n  font-size: 13px;\n  opacity: 0;  \u002F* hidden by default via opacity, not display:none *\u002F\n  transition: opacity 0.15s;\n}\n```\n\n## SVG Container in HTML\n```html\n\u003C!-- Must exist before JS runs -->\n\u003Cdiv id=\"bubble-chart\">\u003C\u002Fdiv>\n```\n\n## Color Scale Including ETF\n```javascript\nconst colorScale = d3.scaleOrdinal(d3.schemeTableau10)\n  .domain(sectors);  \u002F\u002F sectors already includes 'ETF' from fallback assignment\n```","# D3 v6 Bubble Chart with Force Simulation\n\n## Key Requirements\n- Bubbles sized by `marketCap` (ETFs get uniform size)\n- Colored by sector; ETFs assigned sector `'ETF'` as fallback\n- Force simulation with `forceX`\u002F`forceY` pulling toward cluster centers\n- `forceCollide` prevents overlap\n- Pre-tick simulation with `.stop()` + `.tick(N)` for static initial render\n- Tooltip on hover for non-ETF stocks only (detected by `!d.marketCap`)\n- Click interaction highlights corresponding table row\n\n## ETF Handling Pattern\n```javascript\n\u002F\u002F In data loading — assign fallback sector BEFORE building clusterCenters\ndata.forEach(d => {\n  if (!d.sector || d.sector.trim() === '') {\n    d.sector = 'ETF';\n  }\n  \u002F\u002F Parse marketCap as number if present\n  d.marketCapNum = d.marketCap ? parseFloat(d.marketCap) : null;\n});\n```\n\n## Cluster Centers Pattern\n```javascript\nconst sectors = [...new Set(data.map(d => d.sector))];\nconst numSectors = sectors.length;\n\u002F\u002F Arrange cluster centers in a grid or circle\nconst clusterCenters = {};\nsectors.forEach((sector, i) => {\n  const angle = (i \u002F numSectors) * 2 * Math.PI;\n  clusterCenters[sector] = {\n    x: innerW \u002F 2 + (innerW * 0.35) * Math.cos(angle),\n    y: innerH \u002F 2 + (innerH * 0.35) * Math.sin(angle)\n  };\n});\n```\n\n## Force Simulation Pattern\n```javascript\nconst simulation = d3.forceSimulation(data)\n  .force('x', d3.forceX(d => clusterCenters[d.sector].x).strength(0.15))\n  .force('y', d3.forceY(d => clusterCenters[d.sector].y).strength(0.15))\n  .force('collide', d3.forceCollide(d => radiusScale(d.marketCapNum || minBubbleR) + 2))\n  .stop();\n\n\u002F\u002F Pre-tick for static render\nfor (let i = 0; i \u003C 300; i++) simulation.tick();\n\n\u002F\u002F Validate positions\ndata.forEach(d => {\n  if (isNaN(d.x) || isNaN(d.y)) {\n    d.x = innerW \u002F 2;\n    d.y = innerH \u002F 2;\n  }\n});\n```\n\n## Tooltip Pattern (ETF-safe)\n```javascript\nnode.on('mouseover', function(event, d) {\n  if (!d.marketCap) return;  \u002F\u002F Skip ETFs — no marketCap means ETF\n  tooltip\n    .style('opacity', 1)\n    .html(`\u003Cstrong>${d.ticker}\u003C\u002Fstrong>\u003Cbr>${d.name}\u003Cbr>${d.sector}`)\n    .style('left', (event.pageX + 12) + 'px')\n    .style('top', (event.pageY - 28) + 'px');\n})\n.on('mouseout', function(event, d) {\n  if (!d.marketCap) return;\n  tooltip.style('opacity', 0);\n});\n```\n\n## Tooltip CSS\n```css\n.tooltip {\n  position: absolute;\n  background: rgba(0,0,0,0.75);\n  color: #fff;\n  padding: 8px 12px;\n  border-radius: 4px;\n  pointer-events: none;\n  font-size: 13px;\n  opacity: 0;  \u002F* hidden by default via opacity, not display:none *\u002F\n  transition: opacity 0.15s;\n}\n```\n\n## SVG Container in HTML\n```html\n\u003C!-- Must exist before JS runs -->\n\u003Cdiv id=\"bubble-chart\">\u003C\u002Fdiv>\n```\n\n## Color Scale Including ETF\n```javascript\nconst colorScale = d3.scaleOrdinal(d3.schemeTableau10)\n  .domain(sectors);  \u002F\u002F sectors already includes 'ETF' from fallback assignment\n```",{"name":5,"description":7},"main","726e1f79b96b0cb3d729d0e55a1c847e0b5353ae","skills\u002Fb3-teacher-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun3_build-d3-bubble-chart-with-force-simulation",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":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add cxcscmu\u002FSkillLearnBench --skill build-d3-bubble-chart-with-force-simulation",{"tool":60,"command":61},"bunx","bunx skills add cxcscmu\u002FSkillLearnBench --skill build-d3-bubble-chart-with-force-simulation",{"tool":63,"command":64},"pnpm","pnpm dlx skills add cxcscmu\u002FSkillLearnBench --skill build-d3-bubble-chart-with-force-simulation","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb3-teacher-feedback-claude-sonnet-4-6\u002Fstock-data-visualization\u002Frun3_build-d3-bubble-chart-with-force-simulation\u002FSKILL.md",true,[],[69,85,110,128,148,160],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":78,"publishedAt":41},"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",[75],{"categoryNo":76,"categoryName":77,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[79,80,81,82,83,84],"object counter","object","vision","computer","Computer Vision","image",{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":94,"publishedAt":41},"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",[91],{"categoryNo":92,"categoryName":93,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[95,96,97,98,99,100,101,102,103,104,105,106,107,108,109],"workflow","planning","planning workflow","travel","travel planning","travel planning workflow","structured","performing","plan","for","user","it","requirements","essential","itineraries",{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":116,"publishedAt":41},"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",[],[117,118,119,120,121,122,123,98,124,125,99,126,104,127,96],"search","tool","dataset","bundled dataset search tool","restaurants","Tools","up","look","flights","you","database",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":134,"publishedAt":41},"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",[],[135,136,137,104,138,139,140,141,142,143,144,145,126,146,147],"glm output","output","glm","tasks","metrics","json","basics","guidance","matching","verifier","processing","root","calibration",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":155,"publishedAt":41},"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",[154],{"categoryNo":92,"categoryName":93,"taxonomyType":20,"taxonomyTypeDesc":21},[156,147,137,136,142,141,138,157,158,104,159],"glm calibration","setup","companion","metric",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":166,"publishedAt":41},"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",[],[167,137,141,168,156,147,104,136,169,170,171,38,172,173,138],"glm basics","inspect","relevant","files","good","how","Evaluation"]