composing multiple notebooks

I’m wondering if observable supports interactive composing between multiple notebooks or is on the roadmap?

I have started creating multiple notebooks and then composing them into a larger notebook. Now I want some key values set in the master notebook which the children will use as defaults and would be nice to see an updated representation of the data in all notebooks as the data changes in the master notebook.

I will give an example:

I have a master notebook:

that combines values from multiple notebooks. In it I have created a variable numberStatusUsers which is used as a default value for: in its numberStatusUsers. It’s used for some calculations and then the variable currentUtilityValue is imported by the master notebook and used part of the calculations for display. The problem is that changing the slider or even saving an updated value does not automatically adjust the values in the master notebook. Seems I would have to save the master and then refresh the children which looses the whole interactive playground experience of observable and combing them all into one large notebook could get messy.

Wondering if there is currently a way to do this or if something is planned on the roadmap?

If I understand what you’re asking for, you can use the import ... with ... syntax for this. Here’s a quick fork of your master notebook which is more interactive:

See also this nice demo by @mbostock (made in response to another post on the forums):


Interesting application. To echo @bgchen, I would use import-with if it suits your needs.

That said, another option is to use the Broadcast Channel API to synchronize values across windows and even across different notebooks.

You could also use localStorage to persist values.

But, both broadcast channels and local storage are local to your browser—they wouldn’t be visible to other people reading your notebook. For synchronization and persistence across browsers you’d need web sockets and some server-side storage. It’s a pretty interesting application, though. We might offer some API like this in the future.