Horizontal scroll for a wider cell

Community Help
1

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!

2

Hi Yao!

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.

So:

  const div = d3.select(DOM.element('div'))
    .style('overflow-x', 'auto');
  
  const svg2 = div.append('svg')
      .style("width", width)
      .style("height", height);

and at the end:

  return div.node();

(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!

  • Tom
2 Likes
3

Excellent! Glad I asked, and I hope others will find it useful too.

Thank you!