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!

3D surface coloring by rate of change in Z?

Hi folks,

I have a 3D surface plot where X is 7 days with hourly interval, Y is the week number, and Z is a count. I am trying to compare/visualize counts with the aim to detect count changes comparing to both the previous hour and the same hour one week prior, to visualize daily/weekly/monthly patterns and exceptions from those patterns.

The part I am stuck with is, I want to colorize the surface so it is easier to see the Z changes, not the absolute Z value. Is this done by adding the second parameter to Z data array for custom colorization (with values ranging from -1 to 1)? Also, what would be the more appropriate way to determine the change coloring value? A straight delta change of Z from the previous hour is simple but ends up unaware of the Z values for the same hour one week prior, and does indicate the rate of change itself.

You can now use the surfacecolor attribute to customize the color dimension is your surface traces.

See example:

I understand that custom coloring of data points via surfacecolor is available, but that ultimately boils down to a z-independent heatmap if viewed from above, with colors spreading radially from individual data points. Is there a way to individually control the shading/gradients of “quadrants” (if viewing from above) around a data point?

In this sample perhaps I can explain better. Ideally, being able to control the tile/triangles between data points would be nice, so I can have abrupt color changes +/-y around a data point to represent the slope before and after a data point. Two x,z curves that have the same shape ideally should be colored the same even if their z is offset. In the sample, there is a deep blue divot in the surface around x=3, and I would prefer the quadrant to the left (-y) be blue, and the quadrant to the right to be yellow. Will I need to end up cheating somehow by putting fake intermediary points to get more control?

I’m not sure how to handle the color changes in the y direction though, to represent change between present and past weeks (week being effectively a x,z curve). Would a +/- color darkness gradient from a shading middle baseline work, and how would I even do that?

Considering the nature of the data though (2D date-hour/count), it is more like I am trying to achieve a ribbon chart with some sort of color surface between ribbons to represent the change between ribbons, and not a true 3D surface per se.

Perhaps a different way to describe this is instead of the gradient in a specifc surface “tile” being determined by color values propagating from the 4 corners of the tile, the color gradient gets determined by the slopes of the lines connecting the 4 data points (tile edge) and gradient value propagates from the edge of the tile. So for 2 x,z curves that have the same profile but are offset by the same fixed Z, the tile should have the same colors from the x,z edge slope determination (color propagating from tile x edge), and shading/brightness/darkness determined from x,y edge slope determination (shading propagating from tile y edge). If there had been different slopes on the x,z curves for the same x range, then there is a color gradient between tile x edges. I guess this requires using RGB solid color band for coloring in the y direction, since the middle of the color band can’t be lighter or darker.

Am I making any sense at all here?

Hrm, I’m also wondering about loading the time data in x, since I want to effectively do a time series Sunday-to-Saturday comparison, but I didn’t see an obvious way to specify a specific sliding window to collapse the date-time data I have and get the ticks right (show day-of-week and hour for a data point).


Hrm I can see the ribbons at
and the inline embedded loads

but if you actually open the page at codepen
it fails to finish loading (stuck at Loading …?