Generate data-driven continuous size visualization

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const sizeParams = {
  layer: layer,
  view: view,
  valueExpression: "( $feature.POP_POVERTY / $feature.TOTPOP_CY ) * 100",
  legendOptions: {
    title: "% population living in poverty"
  },
  minValue: 15,
  maxValue: 60,
  outlineOptimizationEnabled: true,
  sizeOptimizationEnabled: true
};

let rendererResult = null;

sizeRendererCreator
  .createContinuousRenderer(sizeParams)
  .then((response) => {
    rendererResult = response;
    layer.renderer = rendererResult.renderer;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
return histogram({
    layer: layer,
    valueExpression: sizeParams.valueExpression,
    view: view,
    minValue: sizeParams.minValue,
    maxValue: sizeParams.maxValue,
    numBins: 30
  });
})
.then((histogramResult) => {
  // Create a size slider from the renderer and histogram result.
  const sizeSlider = SizeSlider.fromRendererResult(rendererResult, histogramResult);
  sizeSlider.container = "slider";

  // Color the slider track to match the renderer.
  const iconColor = rendererResult.renderer.classBreakInfos[0].symbol.color;
  sizeSlider.style.trackFillColor = iconColor;

  sizeSlider.labelFormatFunction = (value) => {
    return value.toFixed(1);
  }
  sizeSlider.viewModel.precision = 1;
  sizeSlider.histogramConfig.standardDeviation = null;
  view.ui.add("containerDiv", "bottom-left");
  const titleElement = document.getElementById("title");
  titleElement.innerText = sizeParams.legendOptions.title;

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.

1
2
3
4
5
6
7
8
9
10
11
12
const changeEventHandler = () => {
  const renderer = layer.renderer.clone();
  const sizeVariable = renderer.visualVariables[0];
  renderer.visualVariables = [ sizeSlider.updateVisualVariable(sizeVariable) ];
  layer.renderer = renderer;
}

sizeSlider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);
})
.catch((error) => {
  console.error("There was an error: ", error);
});

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.

Additional visualization samples and resources

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