Row and col headers

by christopheviau

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="container"></div>

CSS

table, td{
    border: 1px solid silver;
    border-collapse: collapse;
}
.row-header{
    color:red;
}

JavaScript

var headers = ['A', 'B', 'C', 'D'];
var matrix = [
    [ 0,  1,  2,  3],
    [ 4,  5,  6,  7],
    [ 8,  9, 10, 11],
    [12, 13, 14, 15],
];

d3.select("#container")
    .append("table")
    .selectAll(".col-header")
    .data(matrix.slice(0, 1))
    .enter().append("tr")
    .classed('col-header', true)
    .selectAll('.cell')
    .data(function(d, i){ return d; })
    .enter().append('th')
    .classed('cell', true)
    .text(function(d, i, pI){ return i+'-'+pI; });

d3.select("#container table")
    .selectAll(".row")
    .data(matrix.slice(1))
    .enter().append("tr")
    .classed('row', true)
    .selectAll('.cell')
    .data(function(d, i){ return d; })
    .enter().append('td')
    .classed('cell', true)
    .classed('row-header', function(d, i){ return i == 0; })
    .text(function(d, i, pI){ return i+'-'+pI; });