[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KD9TYF6ZP1DWETGERNVRAQ":3,"skill-same:01M6KD9TYF6ZP1DWETGERNVRAQ":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},"01M6KD9TYF6ZP1DWETGERNVRAQ","d3-interactive-charts",null,"D3.js techniques for tooltips, hover effects, click handlers, and cross-filtering between visualizations","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-haiku-4-5\u002Fstock-data-visualization\u002Fd3-interactive-charts\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29],"Charts","interactive","d3","d3 interactive charts","hover","visualizations","js","filtering","click","techniques","for","effects","2026-11-10 10:12:30",false,"---\nname: d3-interactive-charts\ndescription: D3.js techniques for tooltips, hover effects, click handlers, and cross-filtering between visualizations\n---\n\n# D3.js Interactive Charts\n\n## Overview\nMaking D3 charts interactive with tooltips, highlighting, and coordinated interactions between multiple charts.\n\n## 1. Tooltips\n\n### HTML Tooltip (Best for Hover)\n```javascript\n\u002F\u002F Create tooltip div\nconst tooltip = d3.select(\"body\")\n  .append(\"div\")\n  .attr(\"class\", \"tooltip\")\n  .style(\"position\", \"absolute\")\n  .style(\"background\", \"rgba(0,0,0,0.8)\")\n  .style(\"color\", \"white\")\n  .style(\"padding\", \"8px 12px\")\n  .style(\"border-radius\", \"4px\")\n  .style(\"pointer-events\", \"none\")\n  .style(\"opacity\", 0)\n  .style(\"z-index\", 1000);\n\n\u002F\u002F Add mouseover handlers\ncircles\n  .on(\"mouseover\", (event, d) => {\n    tooltip\n      .style(\"opacity\", 1)\n      .html(`\u003Cstrong>${d.ticker}\u003C\u002Fstrong>\u003Cbr\u002F>${d.name}\u003Cbr\u002F>${d.sector}`)\n      .style(\"left\", event.pageX + 10 + \"px\")\n      .style(\"top\", event.pageY + 10 + \"px\");\n  })\n  .on(\"mousemove\", (event) => {\n    tooltip\n      .style(\"left\", event.pageX + 10 + \"px\")\n      .style(\"top\", event.pageY + 10 + \"px\");\n  })\n  .on(\"mouseout\", () => {\n    tooltip.style(\"opacity\", 0);\n  });\n```\n\n### CSS Styling for Tooltip\n```css\n.tooltip {\n  position: absolute;\n  padding: 8px 12px;\n  background: rgba(0, 0, 0, 0.85);\n  color: white;\n  border-radius: 4px;\n  font-size: 12px;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s;\n  z-index: 1000;\n  white-space: nowrap;\n}\n```\n\n## 2. Hover Effects\n\n### Highlight on Hover\n```javascript\ncircles\n  .on(\"mouseover\", (event, d) => {\n    \u002F\u002F Highlight the hovered circle\n    d3.select(event.currentTarget)\n      .transition()\n      .duration(200)\n      .attr(\"opacity\", 1)\n      .attr(\"stroke\", \"black\")\n      .attr(\"stroke-width\", 2);\n\n    \u002F\u002F Fade other circles\n    circles.filter(nd => nd.id !== d.id)\n      .transition()\n      .duration(200)\n      .attr(\"opacity\", 0.3);\n  })\n  .on(\"mouseout\", () => {\n    \u002F\u002F Restore all\n    circles\n      .transition()\n      .duration(200)\n      .attr(\"opacity\", 1)\n      .attr(\"stroke\", \"none\");\n  });\n```\n\n## 3. Click Handlers & Selection\n\n### Click to Select\n```javascript\nlet selectedId = null;\n\ncircles\n  .on(\"click\", (event, d) => {\n    selectedId = (selectedId === d.id) ? null : d.id;\n\n    circles\n      .attr(\"opacity\", nd => selectedId === null || nd.id === selectedId ? 1 : 0.3)\n      .attr(\"stroke\", nd => nd.id === selectedId ? \"black\" : \"none\")\n      .attr(\"stroke-width\", nd => nd.id === selectedId ? 2 : 0);\n\n    \u002F\u002F Trigger update in other visualizations\n    updateTable(selectedId);\n  });\n```\n\n## 4. Cross-Filtering Between Charts\n\n### Pattern: Coordinating Multiple Visualizations\n\n```javascript\n\u002F\u002F Define shared selection state\nlet selectedTicker = null;\n\n\u002F\u002F Update when bubble is clicked\nfunction selectBubble(ticker) {\n  selectedTicker = ticker;\n\n  \u002F\u002F Highlight bubble\n  circles.attr(\"opacity\", d => d.ticker === ticker ? 1 : 0.3);\n\n  \u002F\u002F Highlight table row\n  tableRows.attr(\"class\", d => d.ticker === ticker ? \"selected\" : \"\");\n}\n\n\u002F\u002F Update when table row is clicked\nfunction selectTableRow(ticker) {\n  selectedTicker = ticker;\n\n  \u002F\u002F Highlight table row\n  tableRows.attr(\"class\", d => d.ticker === ticker ? \"selected\" : \"\");\n\n  \u002F\u002F Highlight bubble\n  circles.attr(\"opacity\", d => d.ticker === ticker ? 1 : 0.3);\n}\n\n\u002F\u002F Setup handlers\ncircles.on(\"click\", (event, d) => {\n  selectBubble(d.ticker);\n});\n\ntableRows.on(\"click\", (event, d) => {\n  selectTableRow(d.ticker);\n});\n```\n\n### CSS for Selection Highlighting\n```css\n.selected {\n  background-color: #FFC700 !important;\n  font-weight: bold;\n}\n\ntr.selected {\n  background-color: #FFC700;\n}\n```\n\n## 5. Dynamic Updates (Filtering\u002FSorting)\n\n### Update visualization when data changes\n```javascript\nfunction updateChart(newData) {\n  \u002F\u002F Update scales\n  colorScale.domain(Array.from(new Set(newData.map(d => d.sector))));\n\n  \u002F\u002F Rebind data\n  circles = circles.data(newData, d => d.id);\n\n  \u002F\u002F Enter + Update + Exit pattern\n  circles\n    .join(\n      enter => enter.append(\"circle\")\n        .attr(\"r\", d => rScale(d.value))\n        .attr(\"fill\", d => colorScale(d.sector)),\n      update => update,\n      exit => exit.remove()\n    )\n    .transition()\n    .duration(500)\n    .attr(\"cx\", d => xScale(d.x))\n    .attr(\"cy\", d => yScale(d.y));\n}\n```\n\n## 6. Cursor & Visual Feedback\n\n### Indicate Interactivity\n```css\ncircle {\n  cursor: pointer;\n  transition: opacity 0.2s, stroke 0.2s;\n}\n\ncircle:hover {\n  cursor: pointer;\n}\n\ntr:hover {\n  background-color: #f5f5f5;\n  cursor: pointer;\n}\n```\n\n## 7. Event Delegation\n\n### Handle events on parent, not children\n```javascript\n\u002F\u002F Less efficient - attaches handler to many elements\ncircles.on(\"click\", handler);\n\n\u002F\u002F More efficient - single handler on parent\ng.on(\"click\", (event, d) => {\n  if (event.target.tagName === \"circle\") {\n    handleCircleClick(d);\n  }\n});\n```\n\n## Best Practices\n- Use `event.currentTarget` vs `this` for modern D3\n- Debounce mousemove events for performance\n- Clean up event handlers when removing visualizations\n- Use CSS transitions alongside D3 transitions for smooth UX\n- Provide visual feedback for all interactive elements\n","# D3.js Interactive Charts\n\n## Overview\nMaking D3 charts interactive with tooltips, highlighting, and coordinated interactions between multiple charts.\n\n## 1. Tooltips\n\n### HTML Tooltip (Best for Hover)\n```javascript\n\u002F\u002F Create tooltip div\nconst tooltip = d3.select(\"body\")\n  .append(\"div\")\n  .attr(\"class\", \"tooltip\")\n  .style(\"position\", \"absolute\")\n  .style(\"background\", \"rgba(0,0,0,0.8)\")\n  .style(\"color\", \"white\")\n  .style(\"padding\", \"8px 12px\")\n  .style(\"border-radius\", \"4px\")\n  .style(\"pointer-events\", \"none\")\n  .style(\"opacity\", 0)\n  .style(\"z-index\", 1000);\n\n\u002F\u002F Add mouseover handlers\ncircles\n  .on(\"mouseover\", (event, d) => {\n    tooltip\n      .style(\"opacity\", 1)\n      .html(`\u003Cstrong>${d.ticker}\u003C\u002Fstrong>\u003Cbr\u002F>${d.name}\u003Cbr\u002F>${d.sector}`)\n      .style(\"left\", event.pageX + 10 + \"px\")\n      .style(\"top\", event.pageY + 10 + \"px\");\n  })\n  .on(\"mousemove\", (event) => {\n    tooltip\n      .style(\"left\", event.pageX + 10 + \"px\")\n      .style(\"top\", event.pageY + 10 + \"px\");\n  })\n  .on(\"mouseout\", () => {\n    tooltip.style(\"opacity\", 0);\n  });\n```\n\n### CSS Styling for Tooltip\n```css\n.tooltip {\n  position: absolute;\n  padding: 8px 12px;\n  background: rgba(0, 0, 0, 0.85);\n  color: white;\n  border-radius: 4px;\n  font-size: 12px;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s;\n  z-index: 1000;\n  white-space: nowrap;\n}\n```\n\n## 2. Hover Effects\n\n### Highlight on Hover\n```javascript\ncircles\n  .on(\"mouseover\", (event, d) => {\n    \u002F\u002F Highlight the hovered circle\n    d3.select(event.currentTarget)\n      .transition()\n      .duration(200)\n      .attr(\"opacity\", 1)\n      .attr(\"stroke\", \"black\")\n      .attr(\"stroke-width\", 2);\n\n    \u002F\u002F Fade other circles\n    circles.filter(nd => nd.id !== d.id)\n      .transition()\n      .duration(200)\n      .attr(\"opacity\", 0.3);\n  })\n  .on(\"mouseout\", () => {\n    \u002F\u002F Restore all\n    circles\n      .transition()\n      .duration(200)\n      .attr(\"opacity\", 1)\n      .attr(\"stroke\", \"none\");\n  });\n```\n\n## 3. Click Handlers & Selection\n\n### Click to Select\n```javascript\nlet selectedId = null;\n\ncircles\n  .on(\"click\", (event, d) => {\n    selectedId = (selectedId === d.id) ? null : d.id;\n\n    circles\n      .attr(\"opacity\", nd => selectedId === null || nd.id === selectedId ? 1 : 0.3)\n      .attr(\"stroke\", nd => nd.id === selectedId ? \"black\" : \"none\")\n      .attr(\"stroke-width\", nd => nd.id === selectedId ? 2 : 0);\n\n    \u002F\u002F Trigger update in other visualizations\n    updateTable(selectedId);\n  });\n```\n\n## 4. Cross-Filtering Between Charts\n\n### Pattern: Coordinating Multiple Visualizations\n\n```javascript\n\u002F\u002F Define shared selection state\nlet selectedTicker = null;\n\n\u002F\u002F Update when bubble is clicked\nfunction selectBubble(ticker) {\n  selectedTicker = ticker;\n\n  \u002F\u002F Highlight bubble\n  circles.attr(\"opacity\", d => d.ticker === ticker ? 1 : 0.3);\n\n  \u002F\u002F Highlight table row\n  tableRows.attr(\"class\", d => d.ticker === ticker ? \"selected\" : \"\");\n}\n\n\u002F\u002F Update when table row is clicked\nfunction selectTableRow(ticker) {\n  selectedTicker = ticker;\n\n  \u002F\u002F Highlight table row\n  tableRows.attr(\"class\", d => d.ticker === ticker ? \"selected\" : \"\");\n\n  \u002F\u002F Highlight bubble\n  circles.attr(\"opacity\", d => d.ticker === ticker ? 1 : 0.3);\n}\n\n\u002F\u002F Setup handlers\ncircles.on(\"click\", (event, d) => {\n  selectBubble(d.ticker);\n});\n\ntableRows.on(\"click\", (event, d) => {\n  selectTableRow(d.ticker);\n});\n```\n\n### CSS for Selection Highlighting\n```css\n.selected {\n  background-color: #FFC700 !important;\n  font-weight: bold;\n}\n\ntr.selected {\n  background-color: #FFC700;\n}\n```\n\n## 5. Dynamic Updates (Filtering\u002FSorting)\n\n### Update visualization when data changes\n```javascript\nfunction updateChart(newData) {\n  \u002F\u002F Update scales\n  colorScale.domain(Array.from(new Set(newData.map(d => d.sector))));\n\n  \u002F\u002F Rebind data\n  circles = circles.data(newData, d => d.id);\n\n  \u002F\u002F Enter + Update + Exit pattern\n  circles\n    .join(\n      enter => enter.append(\"circle\")\n        .attr(\"r\", d => rScale(d.value))\n        .attr(\"fill\", d => colorScale(d.sector)),\n      update => update,\n      exit => exit.remove()\n    )\n    .transition()\n    .duration(500)\n    .attr(\"cx\", d => xScale(d.x))\n    .attr(\"cy\", d => yScale(d.y));\n}\n```\n\n## 6. Cursor & Visual Feedback\n\n### Indicate Interactivity\n```css\ncircle {\n  cursor: pointer;\n  transition: opacity 0.2s, stroke 0.2s;\n}\n\ncircle:hover {\n  cursor: pointer;\n}\n\ntr:hover {\n  background-color: #f5f5f5;\n  cursor: pointer;\n}\n```\n\n## 7. Event Delegation\n\n### Handle events on parent, not children\n```javascript\n\u002F\u002F Less efficient - attaches handler to many elements\ncircles.on(\"click\", handler);\n\n\u002F\u002F More efficient - single handler on parent\ng.on(\"click\", (event, d) => {\n  if (event.target.tagName === \"circle\") {\n    handleCircleClick(d);\n  }\n});\n```\n\n## Best Practices\n- Use `event.currentTarget` vs `this` for modern D3\n- Debounce mousemove events for performance\n- Clean up event handlers when removing visualizations\n- Use CSS transitions alongside D3 transitions for smooth UX\n- Provide visual feedback for all interactive elements\n",{"name":5,"description":7},"main","726e1f79b96b0cb3d729d0e55a1c847e0b5353ae","skills\u002Fb1-one-shot-claude-haiku-4-5\u002Fstock-data-visualization\u002Fd3-interactive-charts",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":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add cxcscmu\u002FSkillLearnBench --skill d3-interactive-charts",{"tool":49,"command":50},"bunx","bunx skills add cxcscmu\u002FSkillLearnBench --skill d3-interactive-charts",{"tool":52,"command":53},"pnpm","pnpm dlx skills add cxcscmu\u002FSkillLearnBench --skill d3-interactive-charts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb1-one-shot-claude-haiku-4-5\u002Fstock-data-visualization\u002Fd3-interactive-charts\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,28,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,28,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,28,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,28,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,28,126,159,160,161,162,163,164,128],"glm basics","inspect","relevant","files","good","use","how","Evaluation"]