go.Scatter incorrect traceback message for color type error

[100518832]

Trying to plot a scatter plot of points, total 40 colour groups, get the following trace-back that doesn't make sense.

summaries = terror_data[['Summary', 'Group']].loc[(terror_data['Group'].isin(terror_data['Group'].value_counts().index.values.tolist()[1:40])) & (terror_data['Group'] != 'unknown')]

summaries['Summary'] = summaries['Summary'].apply(lambda x: re.sub(r'.*:', '', x).lower().strip())
regex = re.compile('[^a-zA-Z]')
summaries['Summary'] = summaries['Summary'].apply(lambda x: regex.sub('', x))
summaries.reset_index(inplace=True)

tagged_docs = []
for doc, tag in zip(summaries['Summary'], summaries['Group']):
    tagged_docs.append(TaggedDocument(words=word_tokenize(doc), tags=[tag]))

model = Doc2Vec(vector_size=20, alpha=0.025, min_count=1, dm=1)
model.build_vocab(tagged_docs)

for epoch in range(25):
    model.train(tagged_docs, total_examples=model.corpus_count, epochs=model.iter)
    model.alpha -= 0.0002
    model.min_alpha = model.alpha 
    
vectors = []
for doc in summaries['Summary']:
    vectors.append(model.infer_vector(doc.split()))

points = umap.UMAP(n_components=2, random_state=32).fit_transform(vectors)

traces = []

markercl = cl.scales['11']['qual']['Paired']
cl.to_html(markercl)

markercl = cl.interp(markercl, len(summaries['Group'].value_counts().index.values.tolist()))
cl.to_html(markercl)


count = 0
for group, color in zip(numpy.unique((summaries['Group'].values).tolist()), array):
    x = points[[summaries['Group'].loc[summaries['Group']==group].index.values.tolist()],0].tolist()[0]
    y = points[[summaries['Group'].loc[summaries['Group']==group].index.values.tolist()],1].tolist()[0]
    
    trace = go.Scatter(
        x = x,
        y = y,
        name = group,
        mode = 'markers',
        marker = dict(
            size = 2,
            color = str(markercl[count])
        ),
    )
    
    traces.append(trace)
    count += 1
    
fig = go.Figure(data=traces)
py.iplot(fig)

ValueError:
Invalid value of type 'builtins.str' received for the 'color' property of scatter.marker
Received value: 'hsl(-4.999999999999993, 37.36842105263159%, 73.26315789473684%)'

The 'color' property is a color and may be specified as:
  - A hex string (e.g. '#ff0000')
  - An rgb/rgba string (e.g. 'rgb(255,0,0)')
  - An hsl/hsla string (e.g. 'hsl(0,100%,50%)')
  - An hsv/hsva string (e.g. 'hsv(0,100%,100%)')
  - A named CSS color:
        aliceblue, antiquewhite, aqua, aquamarine, azure,
        beige, bisque, black, blanchedalmond, blue,
        blueviolet, brown, burlywood, cadetblue,
        chartreuse, chocolate, coral, cornflowerblue,
        cornsilk, crimson, cyan, darkblue, darkcyan,
        darkgoldenrod, darkgray, darkgrey, darkgreen,
        darkkhaki, darkmagenta, darkolivegreen, darkorange,
        darkorchid, darkred, darksalmon, darkseagreen,
        darkslateblue, darkslategray, darkslategrey,
        darkturquoise, darkviolet, deeppink, deepskyblue,
        dimgray, dimgrey, dodgerblue, firebrick,
        floralwhite, forestgreen, fuchsia, gainsboro,
        ghostwhite, gold, goldenrod, gray, grey, green,
        greenyellow, honeydew, hotpink, indianred, indigo,
        ivory, khaki, lavender, lavenderblush, lawngreen,
        lemonchiffon, lightblue, lightcoral, lightcyan,
        lightgoldenrodyellow, lightgray, lightgrey,
        lightgreen, lightpink, lightsalmon, lightseagreen,
        lightskyblue, lightslategray, lightslategrey,
        lightsteelblue, lightyellow, lime, limegreen,
        linen, magenta, maroon, mediumaquamarine,
        mediumblue, mediumorchid, mediumpurple,
        mediumseagreen, mediumslateblue, mediumspringgreen,
        mediumturquoise, mediumvioletred, midnightblue,
        mintcream, mistyrose, moccasin, navajowhite, navy,
        oldlace, olive, olivedrab, orange, orangered,
        orchid, palegoldenrod, palegreen, paleturquoise,
        palevioletred, papayawhip, peachpuff, peru, pink,
        plum, powderblue, purple, red, rosybrown,
        royalblue, saddlebrown, salmon, sandybrown,
        seagreen, seashell, sienna, silver, skyblue,
        slateblue, slategray, slategrey, snow, springgreen,
        steelblue, tan, teal, thistle, tomato, turquoise,
        violet, wheat, white, whitesmoke, yellow,
        yellowgreen
  - A number that will be interpreted as a color
    according to scatter.marker.colorscale
  - A list or array of any of the above

[empet]

@100518832 the error is caused by the negative hue value in this color code:
'hsl(-4.999999999999993, 37.36842105263159%, 73.26315789473684%)'

[jonmmease]

Hi @100518832, thanks for taking the time to bring this up.

Yeah, the issue is that plotly.py color validation is rejecting this color due to the negative hue value. I tried this out with Plotly.js directly, and it looks like negative hue values are treated as 0 (See https://codepen.io/jonmmease/pen/vVGjjW), so I think the validation logic is correct.

So we could either open an issue to allow Plotly.js to accept negative hue values and just wrap them into the interval from [0, 360] interval, or we could open an issue in colorlover to not produce negative hue values.

@alexcjohnson @etpinard @jackparmer any preference here?

[alexcjohnson]

Plotly.js makes an effort to support all legal CSS colors. According to the spec https://www.w3.org/wiki/CSS3/Color/HSL we should accept any hue:

As an angle, it implicitly wraps around such that -120=240 and 480=120

But this is currently handled inconsistently by plotly.js. If I set both paper_bgcolor and marker.color to the same string 'hsl(-100,100%,50%)', the former works (violet) and the latter clips to hue=0 (red).

The issue seems to be in tinycolor (npm: tinycolor2), the package we use to manipulate color strings bgrins/TinyColor#12 but the PR was basically ignored bgrins/TinyColor#108 (paper_bgcolor is probably just simple enough that we don't bother feeding it though tinycolor)

That said there finally seems to be some new life in the package: bgrins/TinyColor#169 claims to close this issue so perhaps if they really do make a v2 this will work right.

[100518832]

Hi @100518832, thanks for taking the time to bring this up.

Yeah, the issue is that plotly.py color validation is rejecting this color due to the negative hue value. I tried this out with Plotly.js directly, and it looks like negative hue values are treated as 0 (See https://codepen.io/jonmmease/pen/vVGjjW), so I think the validation logic is correct.

So we could either open an issue to allow Plotly.js to accept negative hue values and just wrap them into the interval from [0, 360] interval, or we could open an issue in colorlover to not produce negative hue values.

@alexcjohnson @etpinard @jackparmer any preference here?

Hi Jon,

It is also worth noting the the hsl values were generated using colorlover.py, which is what is recommended when trying to color different traces on the same scatter plot. The coloring I did in my example was just following the notebook found here: color pyplot notebook, and this seems to be an issue of colorlover generating negative values when doing the color interpolation.

[alexcjohnson]

Since we have no idea when tinycolor will get around to this (perhaps we could offer to contribute?) it's probably best to patch colorlover to keep hue within [0, 360].

[jonmmease]

Issue opened: plotly/colorlover#21

[jonmmease]

Fixed in plotly/colorlover#25 and released on colorlover 0.3.0