D3 HTML Table

Community Help
1

Hi,

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!

Cheers,

Oliver

2

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');

to

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.

2 Likes
3

look Mike Bostock’s article here

2 Likes
4

thank you for this helpful link!

5

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

6

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

7
  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

2 Likes
8

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