Center graphics and determine bounds automatically

[corneliusroemer]

Right now the width of the graphic has to be set manually.

It would be great if the width was determined automatically.

Even if that's not possible, the graph should be centered. Right now it seems to be left aligned:

[ivan-aksamentov]

I looked at the d3.js code and could not figure out how to restrict drawing to a given size.

Despite width and height are provided here:

ncov-clades-schema/src/createCladesSchema.js

Line 14 in 18b2a4a

const treemap = d3.tree().size([height, width])

the resulting elements can still be drawn outside the canvas.

Also width and height are swapped and y,x are used throughout the function in reverse order it seems. Maybe this is the clue.

Centering relies on width and height, so I think it is not possible to do, because the final dimensions are unknown, because of what I wrote above.

For now, to keep it simple, after data update, I think we could manually tweak width, height and margins as needed.

If someone attempts to fix that, make sure you keep the viewBox property of SVG. As far as I know it's the only reliable way to scale SVG images responsively (in the downstream projects)