What is the character limit of a cell?

Community Help
1

I’m playing with embedding an SVG export and seem like to hit the character limit of a cell.
So what is the maximum number of characters that you can put in a cell?

Thanks.

2

Can you use a file attachment instead of pasting the contents into a cell?

3

I can show the image with:

 FileAttachment("filename.svg").image()

But it is rendered as an <img> on the page. I want to have an <svg> so that I can animate certain attributes. Is there a way to render it as <svg>? Thanks.

4

Sure, here’s an example:

You can load the file as text, and then use DOMParser to turn it into an element. (d3.svg will also do this for you if you’re using D3.)

2 Likes
5

Could you explain the code a bit? There are a few points that I don’t quite understand.

  1. What is fragment.rootElement? (What is the rootElement property? I can’t find it on MDN. Why do you need to pass it to d3.select, instead of just passing fragment)?
  2. Why do you need to do a selection.remove() first? Is this a way to make it work in Observable?

Thanks.

6

Sure, here’s a breakdown.

First, load the contents of the SVG file as a string.

const text = await FileAttachment("d3-logo.svg").text();

Then, convert that string into a Document by parsing it as SVG.

const document = (new DOMParser).parseFromString(text, "image/svg+xml");

To extract the SVG element from this document, we can use document.documentElement. We also want to remove this SVG element from its current document (created by DOMParser) so that when we return it from the cell, it doesn’t have a parent, and thus the inspector will display it in our notebook: if you return an element that already has a parent, the inspector will display it as ▶︎ Element {} to avoid removing the element from its current location.

const svg = d3.select(document.documentElement).remove();

(In an earlier version of my notebook, I used document.rootElement instead. This works because the document is in fact an SVG document. But there’s no advantage of doing this, and I would guess that using the generic documentElement is more widely supported.)

This example is also using D3 to do the animation, so we select the (now-detached) SVG element so that we can then select all of its descendant paths filled with a particular gray.

const path = svg.selectAll("path[fill='#bbb']");

Then we create a timer that changes the fill color sixty times a second:

const timer = d3.timer(() => path.attr("fill", d3.interpolateRainbow(Date.now() / 10000)));

If the cell is invalidated, say because the code was edited, we don’t want the old timer to keep running forever, so we stop it:

invalidation.then(() => timer.stop());

(There are other animation patterns, if you prefer.)

Lastly we extract the SVG element from the selection with selection.node and return it for display:

return svg.node();
2 Likes
7

Thanks a lot!

1 Like
8

To answer the original question, the limit appears to be 65536 (2^16) bytes per cell.

4 Likes