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];

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close