displaying a chart imported from observable twice in the same document

[stuvjordan-uroc]

Hi!

In one of the source files for a quarto website I'm building, I'd like to display a chart I'm importing from an Observable notebook in two different places.

So, the source file first has an import statement:

import { commentChart } from '@stuvjordan/lesson-1'

then a cell showing the chart:

commentChart

and then, later in the document, a cell showing the chart again:

commentChart

(The notebook the chart is being imported from is public, so you can try all the above yourself.)

This bonks when I render the sourcefile. The chart displays as it should at the second of the two code blocks. But the first codeblock outputs the raw javascript object containing the chart like this:

Is this a bug? Or is there a gotcha I missed in Quarto's or Observable's documentation about how to display the same chart twice in a single file?

Thanks!

[jjallaire]

Thanks, we are tracking this in the following GH issue: #1865

[stuvjordan-uroc]

Thanks, but I don't think this is a Quarto bug. I just tried to display the same chart twice in an Observable notebook and got the same result. So Quarto is doing exactly what an Observable notebook would, and that's a good thing!

[cscheid]

Right, the issue here is that Observable detects DOM sharing. In general, if you want to generate more than one copy of the same visualization on a web page, you will need to create copies of the DOM elements.

There's really no way around this, since DOM elements need to handle things like "parent nodes", and the DOM fundamentally expects a tree structure. As a result, you need to change your API to be a function call that returns new elements on demand, commentChart() or something like that.