Run2 d3 interactive ui

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

Enhancing user experience with polished tooltips, table interactions, and smooth transitions.From its SKILL.md

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.

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.