D3 data table

Skill cxcscmu/SkillLearnBench/skills/b1-one-shot-claude-opus-4-6/stock-data-visualization/d3-data-table

Build interactive HTML data tables with D3.js v6, including row highlighting and click-based selection synced with charts.From its SKILL.md

Install

npx -y skills add cxcscmu/SkillLearnBench --skill d3-data-table

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

SKILL.md

1.2 KB, 313 tokens by cl100k_base, as published. Nobody here has run it

D3.js v6 Data Table with Interactivity

Creating a Table with D3

const table = d3.select("#table-container").append("table");
const thead = table.append("thead").append("tr");
const columns = ["Ticker", "Name", "Sector", "Market Cap"];
thead.selectAll("th").data(columns).join("th").text(d => d);

const tbody = table.append("tbody");
const rows = tbody.selectAll("tr").data(data).join("tr")
  .attr("data-ticker", d => d.ticker);

rows.selectAll("td").data(d => [d.ticker, d.name, d.sector, d.marketCapFormatted])
  .join("td").text(d => d);

Formatting Market Cap

function formatMarketCap(val) {
  if (!val) return "N/A";
  if (val >= 1e12) return (val / 1e12).toFixed(2) + "T";
  if (val >= 1e9) return (val / 1e9).toFixed(2) + "B";
  if (val >= 1e6) return (val / 1e6).toFixed(2) + "M";
  return val.toLocaleString();
}

Bidirectional Selection

On bubble click: highlight corresponding row, scroll into view
On row click: highlight corresponding bubble
Use a shared selectStock(ticker) function

What ships with it

Read from the repository

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