(A similar phenomena can be observed for a constant width while varying the height values.)
This is due to the preserveAspectRatio property on the svg element. Its default value is `meet`, which scales the svg with three rules:
- aspect ratio is preserved - the entire viewBox is visible within the viewport - the viewBox is scaled up as much as possible, while still meeting the other criteria
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/p...
If you fiddle with the attribute value in the Dev Tools, try setting it to `xMinYMid` or `none` to see if that gives you a good sense of how it works. I'm worried that it might just confuse if not explained well :)
It seems that preserveAspectRatio is an important part of understanding viewBox. IMO, it deserves a spot on the telescope's controls. I think a value of `none` might be the best starting point; all of the settings that result in combined scaling and displacement are less intuitive and likely harder to understand at first exposure.
Aside: Even if you decide to keep `xMidYMid ` as the default value for preserveAspectRatio, it seems that you ought to list it explicitly if you wish to specify a meetOrSlice value as Chrome is currently complaining with your existing preserveAspectRatio="meet":
react-dom.production.min.js:978 Error: <svg> attribute preserveAspectRatio: Unrecognized enumerated value, "meet".An interesting plus side: I can export the SVG as a file and get an extremely high quality screenshot.
Perfect for, e.g. board games!
You can get pretty far before that happens - for example, here's a post representing every country in SVG. https://wattenberger.com/blog/d3#maps-and-globes
It's not surprising because it's extremely slow! If you're doing a 2D game, Canvas will be waaaay faster and is much more appropriate.
Moving those sliders will nuke your CPU
probably because the entire <body> is essentially just:
<script src="/prism.js"></script>
<script src="/static/js/20.c80b9d97.chunk.js"></script>
<script src="/static/js/main.635019b5.chunk.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-array.v2.min.js"></script>What about your setup do you think might be causing this problem, given that very few other people are experiencing it?
Maybe you should list your OS, your browser, and your hardware specs.
I added a 30ms debounce, just to help out a bit. I'm seeing some serious jank in Firefox, which smells like the beginning of a rabbit hole. Hopefully I'll find some time to dig in there.