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 #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: