Thanks @archmoj !

Pro tip: make the PR title descriptive, so that we have an idea of what the PR is about just by looking at the title. No one remember issue numbers. Thanks again!

@archmoj I'm curious. What made you decide to patch the regl-line2d?

From https://codepen.io/anon/pen/EpJObQ, swapping mode: 'lines' for mode: 'lines+markers' makes things work leading me to believe that we "could" fix this in plotly.js' scattergl/index.js.

@etpinard
When using only lines (without markers, etc.) using reversed ranges used to create a horizontal or vertical line rather than actual graph.
Please try this:

Plotly.newPlot(gd, [{ "type": "scattergl", "mode": "lines", "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "y": [0, 1, 0, 7, 7, 0, 2, 4, 3, 0], "line": { "width": 10, "dash": "solid" } }], { xaxis:{ range: [-1, 10] }, yaxis:{ range: [10, -1] }}) ;

Yeah I know, but

Plotly.newPlot(gd, [{ "type": "scattergl", "mode": "markers+lines", "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "y": [0, 1, 0, 7, 7, 0, 2, 4, 3, 0], "line": { "width": 10, "dash": "solid" } }], { xaxis:{ range: [-1, 10] }, yaxis:{ range: [10, -1] }}) ;

gives the correct result:

with the current master regl-line2d shader.

I see that the point of a patch in javascript file.
However with in the shader we defined and used 'scale' both as a local variable and uniform!

1. uniform vec2 scale, translate; // global
2. vec2 scale = max(scale, MIN_DIFF); // local
   And I think in the example image provided above the corners may not be properly rendered?

To compare with the above image here is an example of applying only lines with round corners (using new regl-line2d shader).

Plotly.newPlot(gd, [{ "type": "scattergl", "mode": "lines", "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "y": [0, 1, 0, 7, 7, 0, 2, 4, 3, 0], "line": { "width": 10, "dash": "solid" } }], { xaxis:{ range: [-1, 10] }, yaxis:{ range: [10, -1] }}) ;

However with in the shader we defined and used 'scale' both as a local variable and uniform!

To compare with the above image here is an example of applying only lines with round corners (using new regl-line2d shader).

Thanks for the explanation. This makes it very clear. Don't be shy to write down comments on "important" lines on your github PRs to add a little bit of backstory to your work. This makes the review much easier (and faster).

Now, I think the next step would be the make a PR to https://github.com/a-vis/regl-line2d and ping @dy

Not being listed in the contributors of regl I was not able to push my branch for the fix to a-vis/regl-line2d (rather than my fork) so that it could be on a-vis. A similar permission may be required for regl npm packages.
@dy
@alexcjohnson
@bpostlethwaite

Looks good to me! 💃

Lovely fix 🥇