D3 data binding
Efficiently binding data to DOM elements and handling user interactions like hover and click in D3.js.From its SKILL.md
npx -y skills add cxcscmu/SkillLearnBench --skill d3-data-bindingAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
SKILL.md
0.7 KB, 155 tokens by cl100k_base, as published. Nobody here has run it
D3 Data Binding & Interactivity
Use the D3 enter/update/exit pattern to synchronize DOM with data.
Implementation Pattern
// Data binding
const bubbles = svg.selectAll(".bubble")
.data(nodes)
.join("circle")
.attr("class", "bubble")
.on("click", (event, d) => {
highlightRow(d.ticker);
});
// Tooltip
bubbles.on("mouseover", (event, d) => {
d3.select("#tooltip")
.style("display", "block")
.html(`${d.ticker}: ${d.name}`);
})
.on("mouseout", () => {
d3.select("#tooltip").style("display", "none");
});
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.