D3 HTML Table


I have been trying to get a basic table going from this example here:

it runs perfectly on a local HTML file as copied from the gist
but on observable the most I get is an empty square by appending it to an SVG element:

I seem to be missing something basic here, I’d super appreciate if someone can point out what :slight_smile:
Thanks in advance!



Here’s a working version.

I changed these two lines

const svg = d3.create("svg").attr("width", 800).attr("height", 800);
let table = d3.select('svg').append('table');


const div = d3.create("div");
const table = div.append('table');

and then changed the last line to return div.node() instead of svg.node().

There is no <table> element in SVG, only in HTML, so we can add the table to an HTML div.


look Mike Bostock’s article here


thank you for this helpful link!

thanks a lot! What a silly oversight and mistake from my side.

apologies, another question, would you know of some samples where sparklines such as these: Sparklines / Eli Benton Cohen / Observable where used in the table?

  1. create a new notebook
  2. create a new javascript cell with import {data, cumulative_sum, spark} from "@elibenton/sparklines"
  3. create a new javascript cell with “html<table><tr><td>${spark(cumulative_sum(data))}<td>${spark(data,{low:1,high:5})}<td>${spark(data)}

and then you will guess how you can build your own graphs into your table


Thanks a lot Igor, I appreciate the help! I’m sure I’ll get it going soon.