fir zoomable treemap height to window

Community Help
1

I love how the width of this zoomable treemap fits to the window width so there is no scrolling side to side. I’m wondering if there is a way to do that with the height as well. I’ve been attempting to modify via height, viewBox, the y transform/translate, and still have not gotten the height to behave similar to the smooth sizing of the width. Wondering if anyone knows what I’m missing. Thanks!

1 Like
2

Are you talking about this, Zoomable Treemap / D3 / Observable

The height can be changed these and the only issue is the font sizing.
Am I missing something?

3

I think the issue is adjusting the size of the figure with the height of the screen, rather than statically as done in that notebook. It’s easy to adjust the width, thanks to the dynamic width variable. There’s no such height variable so it’s not so simple within an Observable notebook - particularly, if you want to adjust the height dynamically as the user changes the size of the window.

More fundamentally, window.innerHeight within an Observable notebook refers to the height of the sandboxed document, which is huge - 3890 on my Mac.

It’s easy, though, to adjust the height to the window after you embed, though. The idea is write a function draw(h) which draws what you want in terms of the window height h. You then redefine the height variable in the notebook. Here’s an embedded example and the code:

<div id="observablehq-chart-dec4776a"></div>

<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/d/b8359159a76fa079.js?v=3";

function draw_tree(h) {
  let main = new Runtime().module(define, name => {
      if (name === "chart") return new Inspector(document.querySelector("#observablehq-chart-dec4776a"));
  });
  main.redefine('height', 0.95*h)
}

draw_tree(window.innerHeight);
window.onresize = () => draw_tree(window.innerHeight);
</script>
1 Like
4

Maybe height / Fil / Observable can help?

it tries to make height behave a bit like width; import with:
import {height} from "@fil/height"

1 Like
5

I ended up using this https://www.pluralsight.com/guides/re-render-react-component-on-window-resize to adjust the height and width so the entire zoomable treemap could be viewed on full screen on a laptop and resizes when the browser window is minimized. I had created a react component based on the zoom treemap I mentioned before. I really like the other solutions presented here and will see if they might present benefits in the way my component renders and works. Thank you! @mcmcclur @Fil

1 Like