Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

How to link intensity variable to colorbar and hoverinfo in mesh3d plot?

Having the ability in mesh3d to use a variable to color the mesh via the ‘intensity’ attribute is tremendously useful. I am struggling, however, to figure out how to (1) link the colorbar tick labels to the ‘intensity’ variable rather than the ‘z’ value and (2) view the intensity values via hover events.

In the example below for instance, the z variable ranges in value from 1 to 5 but the intensity variable ranges from 0 to 36. Notice that the color displayed on the plot clearly differs from the z value given that it correctly reflects the values that I linked to the ‘intensity’ attribute. Nonetheless for some reason that I do not understand the colorbar ticks show the z value range rather than that of the intensity variable that is used to color the mesh.

An additional thing that I have been unable to figure out is how to get the hover tooltip to show the intensity value as well as the x, y, and z values. Setting ‘hoverinfo’ to ‘all’ doesn’t seem to provide this capability.

A huge thanks in advance to anyone who can help me figure out how to solve these problems!

For reference, here is the JavaScript code that I used to create the plot:

Mesh 3d Example 2
<body>
	<div id='myDiv'></div>
	<script>

	var x = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
	var y = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5];
	var z = [5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 5, 4, 3, 3, 3, 5, 4, 3, 2, 2, 5, 4, 3, 2, 1];
	var color_variable = [14.14213562, 10, 14.14213562, 22.36067977, 31.6227766, 10, 0, 10, 20, 30, 14.14213562, 10, 14.14213562, 22.36067977, 31.6227766, 22.36067977, 20, 22.36067977, 28.28427125, 36.05551275, 31.6227766, 30, 31.6227766, 36.05551275, 42.42640687];

	var trace1 = {
		x: x,
		y: y,
		z: z,
		intensity: color_variable,
		type: 'mesh3d',
		colorscale: 'Jet',
	};

	var data = [trace1];

	var layout = {
		title:  '<b>color by variable other than z</b>',
		xaxis: { title: '<b>x</b>' },
		yaxis: { title: '<b>y</b>' },
		zaxis: { title: '<b>z</b>' },
		width: 700,
		height: 700,
		hoverinfo: 'all'
	};

	Plotly.newPlot('myDiv', data, layout);

	</script>
</body>

@etienne can correct me if I’m wrong, but I believe this is only possible with Plotly’s 3d surface plots (not mesh3d). See this example, https://plot.ly/python/3d-surface-coloring/

Thanks very much for the advice @jack!

The solution for the hoverinfo problem is simply to set the ‘text’ attribute to the same variable as used for the ‘surfacecolor’ attribute as I should have realized long before now.

Here is the resulting plot:

And here is the revised JavaScript code in case it is useful to anyone:

Surface Color Example 2
<body>
	<div id='myDiv'></div>
	<script>

	var x = [1, 2, 3, 4, 5];
	var y = [1, 2, 3, 4, 5];
	var z = [[5, 5, 5, 5, 5], [5, 4, 4, 4, 4], [5, 4, 3, 3, 3], [5, 4, 3, 2, 2], [5, 4, 3, 2, 1]];
	var color_variable = [
		[14.14213562, 10, 14.14213562, 22.36067977, 31.6227766], 
		[10, 0, 10, 20, 30], 
		[14.14213562, 10, 14.14213562, 22.36067977, 31.6227766], 
		[22.36067977, 20, 22.36067977, 28.28427125, 36.05551275], 
		[31.6227766, 30, 31.6227766, 36.05551275, 42.42640687]];

	var trace1 = {
		x: x,
		y: y,
		z: z,
		surfacecolor: color_variable,
		text: color_variable,
		type: 'surface',
		colorscale: 'Jet',
	};

	var data = [trace1];

	var layout = {
		title:  '<b>color by variable other than z</b>',
		xaxis: { title: '<b>x</b>' },
		yaxis: { title: '<b>y</b>' },
		zaxis: { title: '<b>z</b>' },
		width: 700,
		height: 700,
		hoverinfo: 'all'
	};

	Plotly.newPlot('myDiv', data, layout);

	</script>
</body>
1 Like

An unfortunate downside to using the ‘text’ attribute for displaying the ‘surfacecolor’ data during hover events is that the ‘hoverformat’ options for number formatting are not available. Thus in many instances the numbers typically will be displayed with too many decimal places.