Run2 d3 interactive ui

Skill cxcscmu/SkillLearnBench/skills/b2-self-feedback-gemini-3-flash-preview/stock-data-visualization/run2_d3-interactive-ui

[COLM'26] SkillLearnBench is the first benchmark for evaluating continual learning methods that automatically generate agent skills.

Install

npx -y skills add cxcscmu/SkillLearnBench --skill run2_d3-interactive-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Enhancing user experience with polished tooltips, table interactions, and smooth transitions.

SKILL.md

1.3 KB, 300 tokens by cl100k_base, as published. Nobody here has run it

Polished D3 Interactive UI

This skill covers refining the visual feedback and interactivity of the web app.

Better Tooltip Positioning

Use the mouse event to position tooltips accurately, ensuring they don't clip off the screen.

.on("mousemove", (event) => {
    tooltip.style("left", (event.pageX + 15) + "px")
           .style("top", (event.pageY - 15) + "px");
})

Bi-directional Linkage

Ensure that clicking either the bubble or the table row triggers the same state update.

function selectStock(ticker) {
    // Update visual state of all elements
    d3.selectAll(".bubble").classed("selected", d => d.ticker === ticker);
    d3.selectAll("tr").classed("selected-row", d => d.ticker === ticker);
    
    // Scroll table
    const row = d3.select(`#row-${ticker}`).node();
    if (row) row.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Styling for Interactivity

Use CSS for hover effects and clear selection states.

.bubble { transition: r 0.1s; cursor: pointer; }
.bubble:hover { stroke: #000; stroke-width: 2px; }
.selected-row { background-color: #e3f2fd !important; font-weight: bold; }

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.