Static diagram sizing option

[pangloss]

Hi, I use d2 on a daily basis for analyzing program graphs for the compiler I'm working on. It works great for me in general but I'd love to convince you to make diagram scaling optional.

Given the wide variation of both diagram sizes user viewport sizes, I think viewport scaling must rarely be the optimal setting. Most likely only when it happens to produce graphs that are close to the diagram's natural size anyway. I really wish that I could change this behaviour.

My diagrams are sometimes quite large, often with a long sequence of steps rendered either top to bottom or left to right.

In early versions of d2, large graphs were no problem because the graph was not scaled. Everything was a fixed size and I could simply pan around in the browser, and possibly zoom out if I needed to orient myself.

Once viewport scaling came in, things became much more complex for me. In In order for the graph to be legible, I must zoom my browser out as far as possible, reload the page, then zoom in as far as possible. This involves something like 20 steps on the zoom controls. In fact, I had to customize Firefox to allow me a wider range of zoom steps because I needed nearly 100x zoom to read the text on one of the larger diagrams I wanted to look at!

If the diagram has too many elements, it frequently comes out looking like Fig. 1 below.

What I would like is in Fig. 2. To produce that, I opened up the web inspector and made just one edit! By removing the width and height attributes from the svg tag, the diagram magically re-scaled itself to exactly the right size!

It's very inconvenient to mess with the zoom or go in and edit the svg. I really wish I could just provide an --unscaled option when I start the d2 watcher on the console...

Thanks!
Darrick

Before:

<svg id="d2-svg" class="d2-2154263955" width="25.638187993899898" height="953.9999999999999" viewBox="-89 -89 2477 57704">

Fig. 1 "Diff view of 15 compiler transform steps, rendered by d2 in 10.7s"

After

<svg id="d2-svg" class="d2-2154263955" viewBox="-89 -89 2477 57704">

Fig. 2:

[alixander]

thanks for the feedback @pangloss , we'll have this for the next release: #721 (comment)

[bo-ku-ra]

what i really want are

• fit only the width
• fit only the length
• and this

[alixander]

@bo-ku-ra what about if direction is left/right, fit height, if direction is up/down, fit width?

and this.

[bo-ku-ra]

@alixander
that may be the tendency, but it's a matter of preference.
fitting it on one side can make it appear larger.
it's a choice of whether to scroll vertically or horizontally for the viewer to easily understand it, I believe.

[pangloss]

I experimented a bit more with a large diagram today. I misunderstood how the browser behaves when the width and height attributes are removed from the svg tag.

The change I recommended earlier was incorrect and will not have the desired effect.

To get a fixed scale version of the diagram, the only change I needed to make was to add height and width attributes to the outer svg tag. That worked but the diagram was very zoomed in. It was much better when I divided both of those values by 2. Here is the before and after with the first few opening tags of the file:

Before:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="0.2.6" 
  preserveAspectRatio="xMinYMin meet" viewBox="0 0 7681 3045">
<svg id="d2-svg" class="d2-1358957321" width="7681" height="3045" viewBox="-89 -89 7681 3045">

After:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="0.2.6" 
  preserveAspectRatio="xMinYMin meet" viewBox="0 0 7681 3045" 
  width="3840" height="1522">
<svg id="d2-svg" class="d2-1358957321" width="7681" height="3045" viewBox="-89 -89 7681 3045">

[alixander]

It was much better when I divided both of those values by 2.

@pangloss is this just an arbitrary zoom level to get text readable though? which differs depending on the diagram? i'm not sure what D2 can do here

[pangloss]

I mean text readability. The default text/label size is constant, no matter how many nodes in the diagram. At some point it's personal preference, but I am aiming for something about the size I pasted above, which I think balances readability with maximizing the amount of diagram visible.

[alixander]

oh i think i know what you're talking about. you're saying, scale such that a "font-size: 12" word always takes up the same amount of pixels on the screen.

is that right?

[pangloss]

Yes

…

On Thu, Apr 6, 2023 at 5:51 PM Alexander Wang ***@***.***> wrote: oh i think i know what you're talking about. you're saying, scale such that a "font-size: 12" word always takes up the same amount of pixels on the screen. is that right? — Reply to this email directly, view it on GitHub <#1080 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAACPA2YWOC65S3H7BPZYR3W743GZANCNFSM6AAAAAAWEQASTI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[pangloss]

Hey, this one seems to have fallen by the wayside. Is there still any interest in resolving it?

[alixander]

thanks for bumping this. @gavin-ts any ideas how to do this?

[gavin-ts]

I think if we can just merge in #721, that combined with zooming to 50% in the browser should have the desired effect. I created #1346 to resolve merge conflicts and update to work with watch mode

[alixander]

i don't think that's the desired effect.

"scale such that a "font-size: 12" word always takes up the same amount of pixels on the screen."

i think optimizing for text readability has a wide range of zoom levels depending on size of diagram.

[gavin-ts]

"scale such that a "font-size: 12" word always takes up the same amount of pixels on the screen."

when we set the dimensions, font-size: 12 is always the same size

[bo-ku-ra]

was this not implemented in d2 v0.5.0? (#721)

[gavin-ts]

was this not implemented in d2 v0.5.0? (#721)

#1346 is still waiting on review