Run3 build interactive data table with bubble sync

Skill cxcscmu/SkillLearnBench/skills/b3-teacher-feedback-claude-sonnet-4-6/stock-data-visualization/run3_build-interactive-data-table-with-bubble-sync

Use when building an HTML data table that syncs highlighting with a D3 bubble chart on click interactions in both directions.From its SKILL.md

Install

npx -y skills add cxcscmu/SkillLearnBench --skill run3_build-interactive-data-table-with-bubble-sync

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

SKILL.md

2.3 KB, 611 tokens by cl100k_base, as published. Nobody here has run it

Interactive Data Table Synced with D3 Bubble Chart

Table Structure

<div id="stock-table">
  <table>
    <thead>
      <tr>
        <th>Ticker Symbol</th>
        <th>Full Company Name</th>
        <th>Sector</th>
        <th>Market Cap</th>
      </tr>
    </thead>
    <tbody id="table-body"></tbody>
  </table>
</div>

Market Cap Formatting

function formatMarketCap(val) {
  if (!val || isNaN(val)) return 'N/A';
  const num = parseFloat(val);
  if (num >= 1e12) return (num / 1e12).toFixed(2) + 'T';
  if (num >= 1e9)  return (num / 1e9).toFixed(2) + 'B';
  if (num >= 1e6)  return (num / 1e6).toFixed(2) + 'M';
  return num.toString();
}

Table Population

const tbody = d3.select('#table-body');
data.forEach(d => {
  tbody.append('tr')
    .attr('data-ticker', d.ticker)
    .html(`
      <td>${d.ticker}</td>
      <td>${d.name}</td>
      <td>${d.sector}</td>
      <td>${formatMarketCap(d.marketCapNum)}</td>
    `)
    .on('click', function() {
      // Highlight this row
      d3.selectAll('#table-body tr').classed('highlighted', false);
      d3.select(this).classed('highlighted', true);
      // Highlight corresponding bubble
      d3.selectAll('.bubble').classed('highlighted', false);
      d3.select(`.bubble[data-ticker="${d.ticker}"]`).classed('highlighted', true);
    });
});

Bubble Click → Table Sync

// On bubble click
.on('click', function(event, d) {
  // Clear previous highlights
  d3.selectAll('.bubble').classed('highlighted', false);
  d3.selectAll('#table-body tr').classed('highlighted', false);
  // Highlight this bubble
  d3.select(this).classed('highlighted', true);
  // Highlight table row and scroll into view
  const row = document.querySelector(`#table-body tr[data-ticker="${d.ticker}"]`);
  if (row) {
    row.classList.add('highlighted');
    row.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }
});

Highlight CSS

#table-body tr.highlighted {
  background-color: #ffe082;
  font-weight: bold;
}
.bubble.highlighted circle {
  stroke: #ff6f00;
  stroke-width: 3px;
}

What ships with it

Read from the repository

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