D3.js v6 Data Table with Interactivity
SkillDev toolsBuild interactive HTML data tables with D3.js v6, including row highlighting and click-based selection synced with charts.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the D3.js v6 Data Table with Interactivity skill
What this skill tells your AI
The instructions your AI receives, as published by cxcscmu/skilllearnbench in skills/b1-one-shot-claude-opus-4-6/stock-data-visualization/d3-data-table/SKILL.md and read by ahel’s review.
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
Signals
- GitHub stars
- 83
- Forks
- 5
- Last commit
- Jul 2026
Advanced
- Catalog kind
- skill
- Gateway key
d3-data-table- Source
- github.com/cxcscmu/skilllearnbench