Multiple interacting runtime embedded cells in webpage

Hello,

I have two separate observable notebooks, in one I have a zoomable treemap and in the other, I have a bar chart. I have embedded both of these charts in my webpage. Now when a user clicks on the treemap to see the nested data, I want to change the data displayed in the bar chart. I can dynamically change the data of the charts using module.redefine method, but I cannot capture the event of clicking on the treemap to change the data of the bar chart. Is there a way I can capture such events with embedding cells or am I better off implementing the whole thing in the js?

Thanks for help in advance.

Hi @lamrin13! Just to clarify, are you using the “JavaScript with Runtime” embed method for both notebooks? That is, do they share the same Runtime instance?

Also, can you share links to the notebooks that you’re trying to connect so that we can better understand what you are working with?

Assuming that this treemap is one of the notebooks, my recommendation would be to turn your chart cell into a viewof cell. That way your chart cell can expose a value that can be updated on interactions, and that other cells can react to.

For a lightweight introduction to Observable’s viewof macro have a look at this notebook: