d3-interactive-table

D3 v6 Interactive Table with Chart Cross-Linking

Overview

A pure-HTML table built alongside a D3 chart where selections are synchronized: clicking a bubble highlights a table row, clicking a table row highlights the bubble.

Table Construction Pattern

function buildTable(data, containerId) {
    const container = d3.select(containerId);
    const table = container.append('table').attr('class', 'data-table');

    // Header
    const thead = table.append('thead');
    thead.append('tr').selectAll('th')
        .data(['Ticker', 'Full Name', 'Sector', 'Market Cap'])
        .join('th')
        .text(d => d);

    // Body
    const tbody = table.append('tbody');
    const rows = tbody.selectAll('tr')
        .data(data)
        .join('tr')
        .attr('data-ticker', d => d.ticker)  // stable identifier
        .on('click', function(event, d) {
            selectItem(d.ticker);
        });

    rows.selectAll('td')
        .data(d => [d.ticker, d.name, d.sector, formatMarketCap(d.marketCap)])
        .join('td')
        .text(v => v);
}

Cross-Linking Pattern

Use a shared selectItem(ticker) function that updates both the chart and table:

let selectedTicker = null;

function selectItem(ticker) {
    selectedTicker = ticker;

    // Update table rows
    d3.selectAll('tr[data-ticker]')
        .classed('selected', d => d.ticker === ticker);

    // Update chart circles
    d3.selectAll('circle.bubble')
        .classed('selected', d => d.ticker === ticker);

    // Scroll to highlighted row
    const row = document.querySelector(`tr[data-ticker="${ticker}"]`);
    if (row) row.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
}

CSS for Highlighted State

/* Table row highlight */
tr[data-ticker]:hover {
    background: #f0f4ff;
    cursor: pointer;
}
tr[data-ticker].selected {
    background: #dce8ff;
    font-weight: 600;
}

/* Bubble highlight */
circle.bubble.selected {
    stroke: #1a1a2e;
    stroke-width: 3px;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}