search

plotly / Kaleido

Fast static image export for web-based visualization libraries with zero dependencies
Other
363 stars 37 forks source link

Strange lines only in PDF output #44

Open ebzheng opened 4 years ago

ebzheng commented 4 years ago

Thanks for this project -- I think I'm very much in the intended target audience, as I primarily do data analysis within a shared cluster environment with no root access. pip install kaleido is much much easier than trying to get orca to run in that environment!

I've noticed a possible bug, however, with PDF output of Sankey diagrams. This is reproducible with the first example from the Plotly docs, where unwanted horizontal black lines project from every text label (compare below). The static SVG looks correct to me, so I'm inclined to guess it's a kaleido bug vs. something in plotly, but I could well be wrong. I suppose it's also possible that my local computer's PDF rendering is doing something funny, but I see it both in Chrome's viewer and Adobe Reader, which I think should use different libraries.

Static rendered PDF (screenshot): ![image](https://user-images.githubusercontent.com/20051946/93703455-9b689a80-fae5-11ea-8c78-5d1394e128b4.png)
Static rendered JPG: ![image](https://user-images.githubusercontent.com/20051946/93702432-31e88c00-fae5-11ea-9ca3-fc2db6ec2fb9.png)

I primarily run on the aforementioned cluster on RHEL, but I can reproduce this on an AWS Ubuntu Server instance (Ubuntu 18.04.5 LTS) with kaleido 0.0.3 and plotly 4.10.0.

jonmmease commented 4 years ago

Thanks for the report @ebzheng, I can reproduce it on Ubuntu as well.

It does look like something odd is happening in chromium's SVG to PDF conversion. If I export to SVG and open the file in desktop Chromium, everything looks fine. But if I open the print dialog these lines show up:

Screenshot_20200920_055208

Not too surprisingly, I see the same behavior with the legacy orca image export utility so this isn't specifically a kaleido regression.

I don't see the same issue when exporting the graphically similar parallel categories diagram (https://plotly.com/python/parallel-categories-diagram/)

Screenshot_20200920_055936

So there should be something we can do to at least work around the issue.

jonmmease commented 4 years ago

@antoinerg, I'll dig into this a little more before raising a Plotly.js issue, but wondering if you've come across anything like this before. Thanks!

ebzheng commented 4 years ago

Potentially relevant -- I just noticed that while the SVG appears correct in Chrome, if I open it in Illustrator (CC 23.0.1), it throws a warning (Text on Path will be Flattened) and yields the weird lines again:

![image](https://user-images.githubusercontent.com/20051946/93801948-cd2a5000-fc10-11ea-8ce1-59b771ddb0b2.png)

I also sanity-checked some more browser SVG viewers -- Firefox 72.0.2, Chrome 85.0.4183.83, and even IE 11.1016.18362.0 all look "right". I don't know which of Illustrator or the browsers are closer to whatever the SVG implementation reference might be, but hopefully this helps? Honestly though, my instinct is leaning towards it being an upstream plotly issue vs. kaleido...

alexcjohnson commented 4 years ago

This seems to be coming from nodeLabelGuide which is (for some unknown reason) a path we attach the text to. This doesn't seem to be explicitly declared as transparent, so perhaps some viewers draw it as black? Ideally we should be able to get rid of this entirely, but perhaps to start we can just explicitly give it a transparent stroke and fill.

jonmmease commented 3 years ago

Note: we should double check if there's a difference in behavior when explicitly setting config.static to True.