Exporting an image

[harrylojames]

How would I export a plot to html/png/svg?

Ideally I would like to be able to do something similar to Plotly i.e. fig.write_html("path/to/file.html") / fig.write_image("images/fig1.png") / fig.write_image("images/fig1.svg")

[juba]

Hi, this is a good question.

I don't think there is a simple way to do this right now. I should check how to implement this, but it could take some time.

[harrylojames]

Thank you for giving this thought! Any efforts would be greatly appreciated as it's a significant blocker to adopting this package in my workflows more generally

[juba]

Hi, and sorry for taking this long for looking into this issue.

I added a path argument to plot specification when using a jsdom renderer to allow to output the plot to an HTML or SVG file. So you should be able to do something like this:

from pyobsplot import Obsplot, Plot

oj = Obsplot(renderer="jsdom", theme="light")
oj(Plot.rectY(range(3), Plot.binX({"y": "count"})), path="out.html")

This is still experimental and only available in the github version.

Implementing this for the widget renderer doesn't work for the moment. But I believe that even if it works one day, it will only be able to generate a non-easily embeddable HTML file. But I'll continue to take a look into it.

[harrylojames]

No stress at all. Things take time and when I briefly searched online this looked like it would be a tough nut to crack!

Thanks so much for knocking something up. I'll give it a go.

[juba]

In fact I just published pyobsplot 0.4.0 which allows to output plots generated by the jsdom renderer to an SVG or HTML file.

There is a bit of documentation about it here:

https://juba.github.io/pyobsplot/usage.html#saving-plots-to-file

Any feedback appreciated !

Output to file doesn't work for the widget renderer, but I'm not sure if it really makes sense anyway.

[harrylojames]

Hi thanks for publishing!

Using the latest version with python 3.9 gives the following error.

     45     self.port = port
     46     self.theme = theme
---> 48 def plot(self) -> SVG | HTML:
     49     """Generates the plot by sending request to http node server.
     50 
     51     Returns:
     52         Either an HTML or SVG IPython.display object.
     53     """
     55     # Make POST request with plot spec

TypeError: unsupported operand type(s) for |: 'type' and 'type'

The | operator was added in Python 3.10. Given 3.12 was released this week it might be reasonable to set the minimum Python version as 3.10 but your call!

Not a blocker for me as I'm happy to update my Python version :)

[juba]

Ah, you're right, thanks for pointing this out. I found this bug earlier but only put a workaround for CI tests.

The development version should be compatible with Python 3.9 again, sorry !

[juba]

Thanks to the solution in manzt/anywidget#339, saving widget output to an HTML file should now be possible. I'll try to publish a new package version shortly.

[juba]

v0.4.1 just released: https://github.com/juba/pyobsplot/releases/tag/v0.4.1

[harrylojames]

Amazing! Thank you so much for looking into this. I will give it a go tomorrow and let you know how it goes

[harrylojames]

PR to address a bug with saving SVGs #22

[harrylojames]

Another update that I hope is helpful.

When exporting HTML the title font from my notebook is not preserved.

Perhaps this is an observable plot question and not a pyobsplot question!

op = Obsplot(renderer="jsdom")

op(
    {
        "marks": [
            Plot.tickX([0, 5, 10, 15])
        ], 
        "title" : "a",
        "style":{"font-family":"serif"},
    },
    path="test.html"
)

Do you know if this is fixable? Including font-family changes the font for the axis elements but not the title or caption.

I noticed Plotly preserves the title element when saving to SVG with Kaleido

[juba]

When you display the plot without exporting it to a file, your title is in a serif font ? As far as I can see the style option is applied to the <svg> element in the output, so it shouldn't change the font of title, subtitle, caption or legend.

[harrylojames]

Sorry for the delay. Yep that's correct the style option is applied to the svg element so my title remains unchanged. Just noticed there is an issue open on observable plot to be able to style the figure element.

What's the implications of adding a font family here? Perhaps borrowing the font family of h2, h3 and figcaption here?

This would allow one to share html exports over email for example and have them open with titles etc. styled properly.

[juba]

The styles in styles.css should be the default ones when plot is used in Observable. If you change them you would have to rebundle and rebuild the package in order for them to take effect.

So for the moment I think I'll wait for the upstream issue to be resolved.

[harrylojames]

That makes sense thanks. What are your thoughts on this #24? Apologies if I've not fully absorbed your point above!

[harrylojames]

@juba closing as it's possible to export an image. I can split out more specific requests i.e. #23