Create an HTML table from a matrix of numbers

Community Help
1

This is a question related to understanding d3-selection’s documentation.
I try to run the following example in Observable

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var tr = d3.select("body")
  .append("table")
  .selectAll("tr")
  .data(matrix)
  .join("tr");

var td = tr.selectAll("td")
  .data(function(d) { return d; })
  .join("td")
    .text(function(d) { return d; });

I get that I should not use d3.select("body") but I thought replacing it by a

div = html`<div>`;
d3.select(div)...

would do the trick. It does not, sending me instead a TypeError: d3.select(...).append(...).selectAll(...).data(...).join is not a function

So why is d3.select("body") different from d3.select(html

')` beside the fact that the later will return a node without parent ?
2

selection.join was added in d3-selection 1.4 and will be part of d3 5.8 which has not been released yet.

1 Like