In order to render a Circos graphic, the package looks for a div with an id. In order to get it to work in an Observable notebook, what I’ve done is created that div with
return html`<div id="fingerprint"></div>
I then run the
drawCircos function in a later cell.
However, whenever I change something in the notebook (like the API call) a new version of the graphic renders below the original. So, why is that happening? I would think the cell would re-render.
Here’s the notebook
This looks to be the default behavior of the Circos library that you’re using here - it appends a div to the target node whenever you initialize a new Circos object, so initializing multiple Circos objects will render multiple charts. And since the
fingerprint cell doesn’t rely on any other variables, it won’t re-initialize when the chart is re-rendered.
Here’s a private fork of that notebook that adjusts it a bit:
So instead of creating one cell for the output element and then rendering the chart into it, this integrates the rendering and the output so that it’s one simple cell. I’ve also taken a few liberties in conciseifying the logic. But regardless, the key part is that now there’s a line like
let container = html`<div></div>`;
And then we return the container itself to show the visualization. This way if a dependency of the visualization changes, then we re-render the visualization, create a fresh container div, and render it in the notebook.
Hope that helps!
This is excellent! Thanks so much.