Generate continuous color visualization | Sample Code

Explore in the sandbox

View live

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

This is accomplished with the createContinuousRenderer() in the color renderer creator helper object. All that is required for generating a renderer is a Feature Layer and a field name or expression.

Specify input parameters to create a continuous renderer
Use dark colors for code blocksCopy
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
89
90
91
92
93
94
95
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
96
      const colorParams = {
        layer: layer,
        valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
        view: viewElement.view,
        theme: "above-and-below",
        outlineOptimizationEnabled: true,
      };

Use colorRendererCreator to create continuous renderer and apply to the layer
Expand
Use dark colors for code blocksCopy
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
107
108
109
110
111
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
112
      colorRendererCreator
        .createContinuousRenderer(colorParams)
        .then((response) => {
          // Set the renderer to the layer and add it to the map
          rendererResult = response;
          layer.renderer = rendererResult.renderer;
Expand

To generate the histogram used by the slider, simply pass similar parameters to the histogram() function. You can then pass the resulting object to the ColorSlider.

Generate the grayscale histogram for the colorSlider
Use dark colors for code blocksCopy
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
133
          // Generate a histogram for use in the slider. Input the layer
          // and field or arcade expression to generate it.
          return histogram({
            layer: layer,
            valueExpression: colorParams.valueExpression,
            view: viewElement.view,
            numBins: 70,
          });
        })
        .then((histogramResult) => {
          // Construct a color slider from the result of both
          // smart mapping renderer and histogram methods
          const colorSlider = ColorSlider.fromRendererResult(rendererResult, histogramResult);
          colorSlider.container = "slider";
          colorSlider.primaryHandleEnabled = true;
          // Round labels to 1 decimal place
          colorSlider.labelFormatFunction = (value, type) => {
            return value.toFixed(1);
          };
          colorSlider.viewModel.precision = 1;

After the slider is set up with the statistics of the FeatureLayer, you can listen to its events to update the renderer of the layer with the output visual variable in the event object.

Listen for changes to the colorSlider
Use dark colors for code blocksCopy
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
137
138
139
140
141
142
143
144
145
146
147
148
149
149
149
149
149
149
149
149
149
          function changeEventHandler() {
            const renderer = layer.renderer.clone();
            const colorVariable = renderer.visualVariables[0].clone();
            const outlineVariable = renderer.visualVariables[1];
            colorVariable.stops = colorSlider.stops;
            renderer.visualVariables = [colorVariable, outlineVariable];
            layer.renderer = renderer;
          }
          colorSlider.on(
            ["thumb-change", "thumb-drag", "min-change", "max-change"],
            changeEventHandler,
          );

A word of caution

Keep in mind that generating renderers should be avoided in most applications because of the performance cost affecting the end user. As stated in the Smart Mapping guide topic, the Smart Mapping APIs were designed for two types of applications: data exploration apps and visualization authoring apps similar to ArcGIS Online. In all other cases, renderers should be saved to the layer or manually created using any of the renderer classes.