Run3 visualization logic implementation

[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 run3_visualization_logic_implementation

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

Implements the D3.js force simulation, tooltips, and data interaction logic in visualization.js.

1.0 KB, as published. Nobody here has run it

Implement visualization.js with the following structure:

Wrap logic in document.addEventListener('DOMContentLoaded', async () => { ... });.
Load data: Use d3.csv("./data/stock-descriptions.csv").
Bubble Chart:
- Define a d3.forceSimulation.
- Use d3.forceX and d3.forceY grouped by sector name to create clusters.
- Use d3.forceCollide based on bubble radius to prevent overlap.
- Scale radius using d3.scaleSqrt for market cap (handle missing values for ETFs).
Tooltips: Append a hidden div to the body. On mouseover, update and show the tooltip for stocks (filter out ETFs using the sector or market cap null-check).
Interactivity:
- Add click listeners to circles to add a CSS class (e.g., .highlight) and trigger scrollIntoView on the corresponding table row.
- Add click listeners to table rows to find the corresponding bubble and highlight it.