Modify the color scheme of a continuous variable

This sample shows how to modify the color scheme of a variable with continuous data using transferFunction on a VoxelLayer.

If the variable represents quantitative values of continuous measurements, such as temperature and pressure, you can visualize this variable using transferFunction. The transferFunction defines how an individual continuous variable is rendered as a volume or as sections. The stretchRange specifies the minimum and maximum value of the data to apply the colorStops and opacityStops to. The colorStops is a collection of VoxelColorStop that defines a color and a normalized position (i.e. 0 to 1). Use the method getVariableStyle of VoxelLayer to get the selected variable's VoxelVariableStyle.

Refer to sample VoxelLayer Opacity Stops on how to use opacityStops.

Color stops from green to yellow to red.

1
2
3
4
5
6
const currentVariableStyle = vxlLayer.getVariableStyle(null);
const transferFunction = currentVariableStyle.transferFunction();
const colorstopPosition0 = new VoxelColorStop({color: [0, 255, 0, 255], position: 0});
const colorstopPositionMid = new VoxelColorStop({color: [0, 255, 255, 255], position: 0.5});
const colorstopPosition1 = new VoxelColorStop({color: [255, 0, 0, 255], position: 1});
transferFunction.colorStops = [colorstopPosition0, colorstopPositionMid, colorstopPosition1];