Generate continuous color visualization for 3D buildings

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to generate a data-driven continuous color visualization based on statistics returned from a numeric field in a SceneLayer.

This is accomplished with the createContinuousRenderer() in the color renderer creator helper object. All that is required for generating a renderer is a SceneLayer and a field name. However, you can set other parameters including a theme. In this case we use an above-and-below theme, which returns a scheme with two colors diverging from a midpoint.

var colorParams = {
  layer: layer,
  basemap: map.basemap,
  field: "CNSTRCT_YR",
  theme: "above-and-below",
  minValue: 1800
};

colorRendererCreator.createContinuousRenderer(colorParams)
  .then(function(response){

    // set the renderer to the layer
    layer.renderer = response.renderer;

    // create the color slider
    var colorSlider = new ColorSlider({
      statistics: response.statistics
      visualVariable: response.visualVariable,
      numHandles: 3,
      syncedHandles: true,
      container: "slider"
    });

  });

After the ColorSlider is constructed with the statistics of the SceneLayer, you can listen to its events to update the renderer of the layer with the output visual variable in the event object.

Additional visualization samples and resources

• Generate continuous color visualization
• Data-driven continuous color
• Data-driven extrusion