Can someone point me to example where layout in observable is demoed?
My use case is pretty complex where I need to interface date pickers, dropdowns, checkboxes to drive my visualization. There is a lot of examples either via viewof or vega-lite based but I can’t get my mind around how can I structure my layout with them! Do I use either of them? Can I mix them? How? In simple case I understand I can define all my controls separately with viewofs but how do I come up with final viz where they are “close” to the chart? Because constantly scrolling up and down to interface controls is not really user friendly. In case of using vega-lite in observable, is there a sample showing how to achieve the same? Thanks.
We have more work we’d like to do to better support more flexible layouts. Having one reactive value per cell, and a linear ordering of cells down the notebook page can certainly be limiting.
But let’s talk about what you can do today:
One option, as you’ve linked above, is using the open-source Observable Runtime to embed pieces of a notebook into another web page. You can use it to place cells in specific HTML elements, and control the layout with CSS. It’s a bit more complicated to hook together though.
But if you’re just looking for a more compact representation of UI input widgets that can be placed next to a visualization, there are a few notebooks that do that for you:
Or Mike’s Form Input, which just lets you write the raw HTML <form> that you want:
(The downside of having all of your inputs in a single cell is that they’ll present only a single reactive value for the rest of your cells to observe, but that might not matter at all, depending on your notebook.)
Thanks @mootari ! And a question to all: If I define my inputs in grid how can I refer them in other parts of the notebook? I see the grid is array of arrays and I can use it this way, but is there a better way?
A bit late to the party, but I made an easy way for myself to layout “viewof” components inside a single cell. It basically does what @jashkenas recommended, not on an external page though, but inside a cell.
I think the examples in the notebook are pretty explanatory, but I’m curious to hear if you miss something, or if you find bug, were you to use this
