plotly/documentation

Better logarithmic colorscale example

chriddyp opened this issue · 6 comments

chriddyp commented

Our current example does a nice job of scaling the colors but the labels in the colorbar are a little too condensed:
image

I recognize that this may be a limitation of our colorscale axis (there is no log type), but could we have another example that "fakes" it by:

  1. Setting custom ticktext and tickvals
  2. Normalizing the z data if necessary
  3. Remapping the hover data so be the un-normalized values

The solutions team (cc @ycaokris ) has been mapping data to color with logarithmic values lately, which is why I'm thinking it would be helpful to have a better recipe in our docs. Here are some colorscales I've seen from some sample apps:
image
image

The logarithmic colorscales that I'm thinking about are more like this:
image

Once this is updated, we should provide a backlink to the documentation by commenting in the Stack Overflow question about this topic: https://stackoverflow.com/questions/50392372/logarithmic-color-scale-in-plotly

cc @Mahdis-z @emmanuelle @nicolaskruchten

rcwhitney commented

Happy to see this is being brought up. I'm currently working on a project where we are visualizing data with heatmaps and want the z-axis (color) to be logarithmic.

However it appears that the z-axis cannot be set to logarithmic for heatmaps (but haven't been able to 100% confirm this). What we're seeing is when we set the tick marks to be logarithmic for the colorbar is exactly like the first example - and this sounds like the correct behavior if the data being displayed itself is not logarithmic. If the data was, then the spacing between the log tick marks should be the same.

I believe the example used above and in the documention is not displaying the z-axis logarithmically, hence you get that weirdness with the colorbar. Still digging for more information though.

rcwhitney commented

Yes! Those color bars look correct.

May be best to switch out the example with one of those, since it appears density plots don't support logarithmic z-axises.

nicolaskruchten commented

You're right that we don't support log color axes per se: if you look at how these are done, they're linear color axes with log-scaled inputs, and then we change the tick labels from N to 1eN basically.

hhaensel commented

I played a bit with the different examples, but as far as I can understand it the colors appear stretched and the bottom color is almost not recognisable.
I would be nice to have a way of setting colormapping to logarithmic.
Meanwhile I propose a different workaround, which has accurate logarithmic color-mapping:

import numpy as np
import plotly.graph_objects as go

a = np.exp(np.array([[1,2,3],[4,5,6],[7,8,9]]))

def colorbar(zmin, zmax, n = 6):
    return dict(
        title = "Log color scale",
        tickmode = "array",
        tickvals = np.linspace(np.log10(zmin), np.log10(zmax), n),
        ticktext = np.round(10 ** np.linspace(np.log10(zmin), np.log10(zmax), n), 1)
    )

zmin = 1
zmax = 10000
go.Figure(go.Heatmap(z = np.log10(a), text = a,
    hovertemplate = 
    "<i>Logplot Demo</i><br>" +
    "<b>X</b>: %{x}<br>" +
    "<b>Y</b>: %{y}<br>" +
    "<b>Z</b>: %{text:.1f}",
    name = "",
    colorscale = "Portland",
    zmin = np.log10(zmin), zmax = np.log10(zmax),
    colorbar = colorbar(zmin, zmax, 5)
))

image

hhaensel commented

I must admit that at the second glance this is along the lines of https://plotly.com/python/colorscales/#customizing-tick-text-on-logarithmic-color-bars . The additional clue is that the hovertemplate displays the original value. This is particularly useful when there are negative values, where log10 fails. Hovering over these areas shows the original value.