Run3 visualization logic implementation
Implements the D3.js force simulation, tooltips, and data interaction logic in visualization.js.From its SKILL.md
npx -y skills add cxcscmu/SkillLearnBench --skill run3_visualization_logic_implementationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
SKILL.md
1.0 KB, 222 tokens by cl100k_base, 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.forceXandd3.forceYgrouped by sector name to create clusters. - Use
d3.forceCollidebased on bubble radius to prevent overlap. - Scale radius using
d3.scaleSqrtfor market cap (handle missing values for ETFs).
- Define a
- Tooltips: Append a hidden
divto 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 triggerscrollIntoViewon the corresponding table row. - Add click listeners to table rows to find the corresponding bubble and highlight it.
- Add click listeners to circles to add a CSS class (e.g.,
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.