Option to have title and legend within main plot

[Hvass-Labs]

Please explain why you have chosen to have the title and legend as separate HTML and SVG elements instead of being a part of the main plot?

I am not trying to challenge your design as I know you are masters of that. But this particular design choice is giving me several practical problems:

• First is the difficulty of saving a single SVG file from the plot, as discussed in Save / export stand-alone SVG-file with legend #1936, whereas it is quite easy to save if the plot is a single SVG element.

• The plot title renders as an <h2> element, but I am using Bootstrap styling where I normally use <h4> headers, so the plot-title is much larger than the other headers in my page.

• I can add the title manually as a text-mark e.g.: Plot.text(["Manual Title"], {frameAnchor: "top", textAnchor: "middle", dy: -20, fontSize: 14}), but then I also need to increase the top-margin, and then the legend gets moved further away from the plot which looks bad.

• Alignment with surrounding HTML elements can also be challenging.

May I suggest that you make an option whether the title and legend are as now, or
they could be included inside the main plot, much like old-school Matplotlib plots.

Alternatively you could provide a legend-mark so I can insert it manually using e.g. Plot.legend() similar to the hack for adding the title manually with Plot.text().

Thanks!

[Fil]

The cause is that Plot is not a layout engine; hence, we use the browser's capabilities with HTML to allow rich text where necessary (including italics etc, which are quite hard to do with SVG).

One trick that I can give you is that it is completely legitimate to put SVG inside SVG, so you don't really need to create "fake marks" for adding a svg title, instead create a template:

<svg width=640 height=800>
<text x=10 y=30 font-size=30px>${title}</text>
<g transform="translate(0,50)">${Plot.plot(…)}</g>
</svg>

You can even create this as a function of plot options, then extract the title from it, etc.

function myPlot({title, ...options}) {
  return svg`<svg width=640 height=800>
<text x=10 y=30 font-size=30px>${title}</text>
<g transform="translate(0,50)">${Plot.plot(options)}</g>
</svg>`;
}

[Hvass-Labs]

OK thanks, now I understand the necessity for mixing HTML and SVG: Because HTML is much better for text-formatting. But it is extremely rare that I've needed to format titles and legends in my plots. So in my opinion it seems to be an expensive trade-off you've made.

I tried your suggestion with wrapping the SVG in another SVG element but the alignment was all wrong. Although I imagine that could be fixed, it's a very low-level and hacky solution :-)

May I suggest that you either provide an option for including the title and legend in the main plot similar to Matplotlib, or provide a couple of tools so people can do it themselves.

I don't mind using Plot.text() to make a title, or maybe you can make a function called Plot.title() that sets the necessary parameters by default. It is a bit hacky compared to your otherwise beautiful API, but I can live with that.

Then I would just need a function for adding the legend inside the main plot, similar to old-school Matplotlib, and then all my life-problems would be magically solved! Well, if you finish the brushing feature as well! :-)