I haven’t seen any examples where one could scroll to the right, when the contents of the visualization goes off the screen and gets cut off. I don’t know if this is a simple programming matter or is Observable’s design issue.
Here’s my notebook: https://beta.observablehq.com/@liuyao12/descendants-of-queen-victoria
Thank you very much! Great product, and it will surely be a huge success!
Sure, here’s an example of a horizontally-scrolling cell: https://beta.observablehq.com/@tmcw/descendants-of-queen-victoria
The ingredients are:
SVG elements don’t easily support scrolling like this, so I’ve tweaked the visualization to wrap the
<svg> element in a
<div>, and added an
overflow-x: auto style to that div. And then instead of returning the svg, I return the div that contains it and that provides scrolling ability.
const div = d3.select(DOM.element('div'))
const svg2 = div.append('svg')
and at the end:
(instead of directly returning the svg element)
The same pattern should work for most of the cases where you want a visualization to be able to scroll horizontally. Hope that helps!
Excellent! Glad I asked, and I hope others will find it useful too.