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.

var params = {
  layer: povLyr,
  basemap: map.basemap,
  field: "POP_POVERTY",
  normalizationField: "TOTPOP_CY",
  legendOptions: {
    title: "% of people living in poverty"
  },
  minValue: 15
};

sizeRendererCreator.createContinuousRenderer(params)
  .then(function(response){

    // set the renderer to the layer
    povLyr.renderer = response.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 the SizeSlider.

histogram({
  layer: povLyr,
  field: sizeParams.field,
  normalizationField: sizeParams.normalizationField,
  minValue: sizeParams.minValue
})
  .then(function(histogram){
    // add the histogram to the size slider
    var sizeSlider = new SizeSlider({
      statistics: stats,  // stats returned from createContinuousRenderer()
      visualVariable: sizeVV,  // size visual variable returned from createContinuousRenderer()
      histogram: histogram,  // returned from histogram()
      container: "slider"
    });

    view.ui.add(sizeSlider, "bottom-right");
  });

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.

Additional visualization samples and resources

• Data-driven continuous size
• Data-driven extrusion