Skip to content

Lines in Parallel Coordinates plot not anti-aliased on some hardware #2756

Closed
@idea-launch-lab

Description

@idea-launch-lab

The lines in Plotly's parallel coordinates plot (plotly.js) are not appearing smooth or correctly anti aliased. Is there a CSS setting or parameter to control rendering of lines in the plot?

Below is a comparison with native D3 parallel coordinates plot. The plots have been zoomed in a bit. Thanks.

screen shot 2018-06-27 at 9 29 28 am

Activity

etpinard

etpinard commented on Jun 29, 2018

@etpinard
Contributor

Hmm. https://rreusser.github.io/plotly-mock-viewer/#gl2d_parcoords doesn't look as blurry to me as your screenshot of the left. Would you mind sharing a reproducible example?

We turn on antialising here, so this report seems a little strange to me. What us could be going on? Maybe @dy could help us out?

Is there a CSS setting or parameter to control rendering of lines in the plot?

Below is a comparison with native D3 parallel coordinates plot.

Our parcoord lines are drawn in WebGL not d3, so CSS won't fix the problem unfortunately.

alexcjohnson

alexcjohnson commented on Jul 3, 2018

@alexcjohnson
Collaborator

@sid-thakur what hardware are you using? I have to say when I look at https://rreusser.github.io/plotly-mock-viewer/#gl2d_parcoords on my mac retina display it looks a bit blurry, as do scattergl plots like https://rreusser.github.io/plotly-mock-viewer/#gl2d_10, whereas gl3d plots look crisp. I hadn't noticed this before but I mostly display plots on my second monitor, which is not as high resolution. Perhaps we need to oversample in addition to antialiasing?

changed the title [-]Lines in Parallel Coordinates plot not anti-aliased[/-] [+]Lines in Parallel Coordinates plot not anti-aliased on some hardware[/+] on Oct 5, 2018
self-assigned this
on Mar 3, 2019
archmoj

archmoj commented on Mar 15, 2019

@archmoj
Contributor

As a reference point, Mac with FireFox renders like this i.e. without anti-aliasing (Note: although anti-aliasing is requested by the code on some hardware it may not be enabled). To improve this situation, such cases could be detected and doubling glPixelRatio values may help.
https://rreusser.github.io/plotly-mock-viewer/#gl2d_parcoords
macOS_with_FireFox

taylorjacklespriggs

taylorjacklespriggs commented on Aug 8, 2019

@taylorjacklespriggs

This issue persists on Firefox 68.0.1
https://codepen.io/plotly/pen/QpKOPr
Screen Shot 2019-08-08 at 1 39 28 PM

specs
MacOS Sierra 10.12.6
MacBook Pro (15-inch, 2017)
Graphics

  • Radeon Pro 555 2048 MB
  • Intel HD Graphics 630 1536 MB
removed their assignment
on Mar 3, 2020
added this to the NEXT milestone on Jul 9, 2021
archmoj

archmoj commented on Jul 12, 2021

@archmoj
Contributor

Fixed by #5500

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugsomething broken

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @alexcjohnson@idea-launch-lab@etpinard@taylorjacklespriggs@archmoj

        Issue actions

          Lines in Parallel Coordinates plot not anti-aliased on some hardware · Issue #2756 · plotly/plotly.js