Plotly.js: Line colorscale on scatter graph

[MonsieurV]

Hello,

I can't make work the marker.line.colorscale property. I'm not sure how it should work, but what I can say is:

• using the colorscale property on lines as it is used on markers has no effect
• if we use the property on a scatter graph with both lines and markers we have a bug (or I'm not using it properly?)

So is it possible to color a line following a colorscale on a scatter graph? How we do it?

Moreover the documentation is confusing, as it states the property line is under the mark one:

Sets the colorscale and only has an effect if marker.line.color is set to a numerical array.

Actually it seems not to be the case: http://codepen.io/anon/pen/OXJErp. Should the documentation states line.color instead?

I can do a PR to fix the doc, but I want to be sure I'm not misleading first.

[MonsieurV]

Seems like the feature was already suggested in #147 see

[etpinard]

Thanks for the very detailed issue.

In plotly.js, attributes under marker.line describe the marker points' bordering line styling (example here) and have no effect on a scatter trace's line segments.

At the moment, scatter line attributes do not support color scales nor per-data-point style setting (as mentioned in https://github.com/plotly/plotly.js/issues/147). In other words, there is no way to apply a colour gradient to a plotly.js line chart.

Adding color scale support to line charts (possibly using svg gradient) would be a great addition to the library.

[etpinard]

We should also add this feature for scatter3d traces e.g.

from here.

[etpinard]

Assigning the scatter3d part to @monfera

[monfera]

A comment about SVG (note: no plotly support at the moment) which underlies the regular plots that don't use WebGL:

• It is possible to do gradient coloring for anything that uses the <line> tag
• It is possible to draw a polyline out of multiple <line> tags, with the caveat that the miters would have to be handled, i.e. a <polyline> or equivalent <path> tag with lineTo segments, containing N line sections will map to 2*N DOM elements (a <line> and a two-section <polyline> for each). If the line width is no more than 1px, then the miters can be omitted. The benefit with a separate DOM element for each line section is that the thickness can also be varied; in this case, we'd need to use a thin, long quadrilateral <polygon> rather than a <line> for each line section.
• For other shapes, it is also possible to do gradient coloring along the X or Y axis, or any other direction on the projection plane, for the _entire_ shape only; i.e. the metric that determines where we are in the gradient is the specific direction vector (e.g. horizontal) rather than the running length of the shape.

There are techniques for gradient coloring (or similarly, varying thickness) for general SVG curves along their running length, but they involve the slicing of the original curve, as this example does.

[timelyportfolio]

@monfera, perhaps related http://bl.ocks.org/pbeshai/ffd0f9d84b4e8df27db2

[monfera]

@timelyportfolio these things look fantastic, and they show width variation too! The gradients are implemented as in the third point, i.e. the whole path has one gradient vector (example defaults to horizontal), which works as the trace points are in a strictly monotonic order when projected to the given gradient vector.

[monfera]

The SVG gradient technique is suitable not only for actual gradients, but discontinuous steps at arbitrary points with arbitrary colors just by specifying a new color at the same stop value, see it e.g. here: http://codepen.io/monfera/pen/JKoVvJ?editors=1000

[monfera]

WebGL: most shaders do color interpolation; it is also the case with our underlying gl-line3d (see new example). We need to expose it. A PoC from plotly.js under development, where some segments are gradient colored, and some have a fixed color:

[monfera]

Clarification: the current line color gradient, and colorscale specification for the markers and connecting lines are required to be implemented initially for scatter3d only, i.e. other types, SVG based scatter in particular are not currently in the making, in part due to the inherent complexities present with SVG paths.

[NJannasch]

Any news on color scales or per-data-point style setting?
Unfortunately scatter3d do not fit my needs - is it possible to transform a 3d graphic into a 2d projection?

[monfera]

@NJannasch the scatter3d part has been merged: https://github.com/plotly/plotly.js/pull/617 but I don't think anybody was assigned to or took on a 2D equivalent. It's possible to set the 3D camera such that you get an orthographic projection, and you can disable the axis ticks perpendicular to the screen surface, as well as controls (e.g. rotations) that are there for 3D navigation. Here's a fork of an example from @etpinard that uses camera controls.

[HaleKonopka]

Is there any plan for future work to address this issue of adding colorscale functionality to Scatter (in 2D) with lines alone?

[kanchannmahajan]

@monfera I am trying to workaround this for 2d graphs
I have managed to get the correct camera angle
can you please be so kind to tell how to disable 3D axis and rotation --

you can disable the axis ticks perpendicular to the screen surface as well as controls (e.g. rotations)
Thanks

[monfera]

@kanchannmahajan you can hide the entire modebar with displayModeBar: false and the general doc for these is here. You can also hide specific buttons on the modebar. There's also the dragmode property that, in the case of scatter3d, lets you specify "turntable", "orbit" or, to disable dragging, false: https://codepen.io/anon/pen/ypQpPV

The combination of these with an axis-aligned ortographic projection, I believe, permit some kind of pseudo-2D view, but there might be gotchas.

[monfera]

@etpinard I've self-unassigned as my assignment was for the scatter3d part, done long ago.

[acharyatilak]

Any update on adding colorscale functionality to Scatter (in 2D) ?

[brockelmore]

Hard to believe this has remained open for 2.5 years. What is the main hold up? This seems like a core function to graphing. I've been messing around with trying to alter via d3 but it is an extreme pain.

[monfera]

Not all data visualization packages have this feature, and my completely uninformed guess would be that there hasn't been strong demand for this specific function on client projects so far. On the off chance it's useful for covering this or larger functional gaps, Plotly has a page where users can directly engage in feature work, or alternatively, PR suggestions can be discussed and then implemented, there are several features that were added in large part by users.

[brockelmore]

Sorry if I came off rude - just seems like a lot of other projects, Chart.js, Highcharts, etc. have this functionality. I view color gradients and line width as third and fourth dimensions without the complications of actually being in that high dimensionality. And it seems like there are a ton of applications for it so I am just surprised. I don't have $15,000 to spend on this feature, I work with a tiny startup currently. I will check out if I can help but I haven't grokked the system so knowing the ins and outs will take some time.

[alexcjohnson]

@brockelmore as you alluded to above, this is an extreme pain with D3 - ie SVG. There are straightforward solutions for a few cases, like a color gradient that's purely a function of x or y coordinate, but of course this doesn't add any new information to the chart, it's purely aesthetic. Beyond these cases we would need to specify lines as filled paths, rather than stroked lines, which is both annoying to compute (at least for splines) and prone to antialiasing problems where separate paths meet. I suspect for the most general case there is actually no solution we'd be completely happy with in SVG.

But in WebGL it's manageable, which is why line color gradients were added to scatter3d a long time ago. Now that scattergl is nearly up to par with (SVG) scatter, I would propose adding it there and saying "if you want line color and width gradients, use scattergl."

[etpinard]

I would propose adding it there and saying "if you want line color and width gradients, use scattergl."

I'm a big fan of this proposed solution :ok_hand:

[brockelmore]

Sounds great, I am going to stick around plotly and hopefully learn the systems and contribute when I can. For the record, "purely aesthetic" is an entirely valid reason to add a feature, especially when visualization is the core functionality of the project (and any way to accomplish that, such as WebGL, is fine)!

[gullpavon]

If one were to want to display a gradient line on a line chart (purely for aesthetics purposes) , is that possible?

[archmoj]

@brockelmore as you alluded to above, this _is_ an extreme pain with D3 - ie SVG. There are straightforward solutions for a few cases, like a color gradient that's purely a function of x or y coordinate, but of course this doesn't add any new information to the chart, it's purely aesthetic. Beyond these cases we would need to specify lines as filled paths, rather than stroked lines, which is both annoying to compute (at least for splines) and prone to antialiasing problems where separate paths meet. I suspect for the most general case there is actually no solution we'd be completely happy with in SVG.

But in WebGL it's manageable, which is why line color gradients were added to scatter3d a long time ago. Now that scattergl is nearly up to par with (SVG) scatter, I would propose adding it there and saying "if you want line color and width gradients, use scattergl."

@alexcjohnson should we rename the issue title to include scattergl instead of scatter?

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.