[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KF1V8GXTQY40GRDKBZPTS4":3,"skill-same:01M6KF1V8GXTQY40GRDKBZPTS4":60},{"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":33,"linkOnly":34,"markdownContent":35,"markdownBody":36,"frontMatter":37,"refName":38,"commitSha":39,"skillDirectory":40,"forksCount":41,"repositoryHtmlUrl":42,"repositoryHomepageUrl":43,"ownerHtmlUrl":44,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":45,"install":46,"resources":59},"01M6KF1V8GXTQY40GRDKBZPTS4","d3-linked-interactivity",null,"Guide for linking D3.js SVG visualizations with DOM elements like HTML tables for bidirectional interactivity (hover, click, highlight).","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\u002Fb1-one-shot-gemini-3.1-pro-preview\u002Fstock-data-visualization\u002Fd3-linked-interactivity\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],"d3","d3 linked interactivity","hover","visualizations","js","guide","html","elements","click","SVG","with","tables","dom","for","linking","2026-11-10 10:12:30",false,"---\nname: d3-linked-interactivity\ndescription: Guide for linking D3.js SVG visualizations with DOM elements like HTML tables for bidirectional interactivity (hover, click, highlight).\n---\n\n# D3 Linked Interactivity\n\nBidirectional interactivity allows a user to interact with one chart (e.g., a bubble) and see updates in another component (e.g., a table row).\n\n## Implementation\n\n1. **Assign unique IDs or Classes**: Ensure both the SVG elements and Table rows share a common data key, like an ID or Ticker.\n```javascript\n\u002F\u002F Table rows\nconst rows = tbody.selectAll(\"tr\")\n  .data(data)\n  .enter()\n  .append(\"tr\")\n  .attr(\"id\", d => `row-${d.id}`);\n\n\u002F\u002F SVG Nodes\nconst nodes = svg.selectAll(\"circle\")\n  .data(data)\n  .enter()\n  .append(\"circle\")\n  .attr(\"id\", d => `node-${d.id}`);\n```\n\n2. **Event Listeners**:\nAdd `click` or `mouseover` events that select the linked element and toggle a highlighted state.\n\n```javascript\nnodes.on(\"click\", function(event, d) {\n  \u002F\u002F Reset all\n  d3.selectAll(\".highlight\").classed(\"highlight\", false);\n  \n  \u002F\u002F Highlight self and linked row\n  d3.select(this).classed(\"highlight\", true);\n  d3.select(`#row-${d.id}`).classed(\"highlight\", true);\n  \n  \u002F\u002F Scroll row into view\n  document.getElementById(`row-${d.id}`).scrollIntoView({ behavior: 'smooth', block: 'center' });\n});\n\nrows.on(\"click\", function(event, d) {\n  d3.selectAll(\".highlight\").classed(\"highlight\", false);\n  d3.select(this).classed(\"highlight\", true);\n  d3.select(`#node-${d.id}`).classed(\"highlight\", true);\n});\n```\n","# D3 Linked Interactivity\n\nBidirectional interactivity allows a user to interact with one chart (e.g., a bubble) and see updates in another component (e.g., a table row).\n\n## Implementation\n\n1. **Assign unique IDs or Classes**: Ensure both the SVG elements and Table rows share a common data key, like an ID or Ticker.\n```javascript\n\u002F\u002F Table rows\nconst rows = tbody.selectAll(\"tr\")\n  .data(data)\n  .enter()\n  .append(\"tr\")\n  .attr(\"id\", d => `row-${d.id}`);\n\n\u002F\u002F SVG Nodes\nconst nodes = svg.selectAll(\"circle\")\n  .data(data)\n  .enter()\n  .append(\"circle\")\n  .attr(\"id\", d => `node-${d.id}`);\n```\n\n2. **Event Listeners**:\nAdd `click` or `mouseover` events that select the linked element and toggle a highlighted state.\n\n```javascript\nnodes.on(\"click\", function(event, d) {\n  \u002F\u002F Reset all\n  d3.selectAll(\".highlight\").classed(\"highlight\", false);\n  \n  \u002F\u002F Highlight self and linked row\n  d3.select(this).classed(\"highlight\", true);\n  d3.select(`#row-${d.id}`).classed(\"highlight\", true);\n  \n  \u002F\u002F Scroll row into view\n  document.getElementById(`row-${d.id}`).scrollIntoView({ behavior: 'smooth', block: 'center' });\n});\n\nrows.on(\"click\", function(event, d) {\n  d3.selectAll(\".highlight\").classed(\"highlight\", false);\n  d3.select(this).classed(\"highlight\", true);\n  d3.select(`#node-${d.id}`).classed(\"highlight\", true);\n});\n```\n",{"name":5,"description":7},"main","726e1f79b96b0cb3d729d0e55a1c847e0b5353ae","skills\u002Fb1-one-shot-gemini-3.1-pro-preview\u002Fstock-data-visualization\u002Fd3-linked-interactivity",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":47,"prompt":57,"zipAvailable":58},[48,51,54],{"tool":49,"command":50},"npx","npx skills add cxcscmu\u002FSkillLearnBench --skill d3-linked-interactivity",{"tool":52,"command":53},"bunx","bunx skills add cxcscmu\u002FSkillLearnBench --skill d3-linked-interactivity",{"tool":55,"command":56},"pnpm","pnpm dlx skills add cxcscmu\u002FSkillLearnBench --skill d3-linked-interactivity","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcxcscmu\u002FSkillLearnBench\u002Fblob\u002Fmain\u002Fskills\u002Fb1-one-shot-gemini-3.1-pro-preview\u002Fstock-data-visualization\u002Fd3-linked-interactivity\u002FSKILL.md",true,[],[61,79,103,121,141,153],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":72,"publishedAt":33},"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",[67],{"categoryNo":68,"categoryName":69,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[73,74,75,76,77,78],"object counter","object","vision","computer","Computer Vision","image",{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":88,"publishedAt":33},"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",[85],{"categoryNo":86,"categoryName":87,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000023","Skill与智能体开发",[89,90,91,92,93,94,95,96,97,31,98,99,100,101,102],"workflow","planning","planning workflow","travel","travel planning","travel planning workflow","structured","performing","plan","user","it","requirements","essential","itineraries",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":33},"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",[],[110,111,112,113,114,115,116,92,117,118,93,119,31,120,90],"search","tool","dataset","bundled dataset search tool","restaurants","Tools","up","look","flights","you","database",{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":127,"publishedAt":33},"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",[],[128,129,130,31,131,132,133,134,135,136,137,138,119,139,140],"glm output","output","glm","tasks","metrics","json","basics","guidance","matching","verifier","processing","root","calibration",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":148,"publishedAt":33},"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",[147],{"categoryNo":86,"categoryName":87,"taxonomyType":70,"taxonomyTypeDesc":71},[149,140,130,129,135,134,131,150,151,31,152],"glm calibration","setup","companion","metric",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":159,"publishedAt":33},"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",[],[160,130,134,161,149,140,31,129,162,163,164,165,166,167,131],"glm basics","inspect","relevant","files","good","use","how","Evaluation"]