Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Choose levels for the contours in the contour plot


I try to convert an existing code in python to make contour plot because it’s interesting to interact with data on website with Plot.js

Because what we want to see is not linear, I defined levels used by Python to show corresponding lines in contour plot.

The python code :

import numpy as np
from matplotlib import pyplot
import mpl_toolkits.axes_grid1 as ag

x = np.array(...)
y = np.array(...)
z = np.array(...)

levels = np.array([0.,0.00005,0.0001,0.0002,0.00033,0.00076,0.001,0.003])

fig = pyplot.figure(num=1,figsize=(12, 8),dpi=300,facecolor='w',edgecolor='k')
ax = fig.add_subplot(111, aspect="equal")

pltcf = ax.contourf(x, y, z, levels=levels,  cmap="gnuplot2_r", extend="both", origin='lower')
pltct = ax.contour(x, y, z, levels, colors='k', linewidths=0.5, origin='lower')
divider = ag.make_axes_locatable(ax)
cax = divider.append_axes("right", size="5%", pad=0.1)
fig.colorbar(pltcf, cax=cax, orientation='vertical', format='%.1g')

And the result with Python :

Is it possible to do the same thing with Plot.js ? Actually, I saw variables in contours object to define start, end and step, but nothing with personal values.

The result with Plot.js (same datas) : https://codepen.io/nl78/pen/NYxoyp

Thanks in advance for your help.

Here are all the ways to customize contours at the moment:

Unfortunately, we don’t suppose unevenly-spaced contour levels yet. But you should be able to get the desired results using multiple traces. I hope this helps.

Thanks for your answer.

I find a way. I took the log(z array) and changed values show on the color bar to put exponential of previous log values.

I just find a way to print the hover values below the contour map.

Is it possible to change directly the text in hover box generates by plot.ly ?

The new contour map : https://codepen.io/nl78/pen/NYxoyp

Thanks for your time :slight_smile:

Does plotly developers has any plan to support the custom contour levels feature? Its a very important requirement when it comes to contour plots as most of the practical data we work on is not always has a linear trend and a linear contour leveling makes then jammed up in a small place.

I would also be interested in this feature.

Tracked in https://github.com/plotly/plotly.js/issues/4503.


About the workaround that @etienne mentioned, is it correct that we need the data to be in every trace? or can traces share the x, y, and z data? because if not, the size of the data structure can increase massively.

Additionally, is there any ide we can “hack” a good colorbar in this case?