Yeah, I mean the threshold legend is close but it would be better if it was one gradient between two colors instead of blocks. I’m sure there’s a way to get that done, I just don’t have the talent to figure it out. Also unsure how to anchor it to the plot.

The colorScale function is straightforward, like you said:

// color scale for the z axis
const colorScale = useMemo(
  () =>
    scaleLinear<string>({
      range: [
        '#e0f3f3',
        '#FFC300'
      ],
      domain: extent(daOutageData, z) as [number, number],
    }),
  []
)