Layout multiple Plot charts and save PNG/SVG

Community Help
1

Hi,

There is this nice answer here about arranging multiple charts in one layout: Layout Multiple Plot charts

If we try to save this in PNG/SVG using the Observable built-in option on the 3 dots, it saves just the first of the 3 plots. Is there any way to save the whole plot composition (preferably using this approach: Saving SVG / Mike Bostock | Observable)?

Thanks!

2

Since this solution is using HTML, it’s difficult to make it save as SVG. You could however compose the charts in one big svg, for example like this:

<svg width=800 height=1500>
  <g transform="translate(0,0)">${chart0}</g>
  <g transform="translate(0,600)">${chart1}</g>
  <g transform="translate(0,1200)">${chart2}</g>
</svg>

where 800 is the maximum of the charts’ widths, and 0, 600, 1200 is the cumulative sum of the charts’ heights.

This could be automated by making a small utility function that arranges SVG files together, horizontally or vertically, and that would look at the height attributes of the generated SVGs, adding padding, etc.

3

Thanks! It would be nice to have something similar to this, in Plot: The Composer of Plots • patchwork

4

This is a good reference, thank you! There is also vega’s concat (hconcat/vconcat) operators.

I understand that there are many use cases where this type of tool might come handy: a newspaper that needs to publish the same weather chart every day for 50 localities; a report-writer who needs to convert 100 charts in the same style to the design specs, etc., and we want to support these use cases.

The problem however is to define the scope well: while it is relatively easy to write a simple tool that concats svgs in one direction or the other, making a generic SVG layout engine would be non-trivial (and a lot of work).

There is also this discussion on Observable’s feedback repo, and you might find the plot figure to svg notebook useful: it is a utility that takes the HTML parts of a plot-generated figure element and tries to convert it to SVG.

1 Like