Generate univariate continuous size and color visualization in 3D

This sample demonstrates how to generate a univariate data-driven visualization using continuous color and size based on statistics returned from a numeric field in a FeatureLayer in a 3D SceneView.

This is accomplished with the createContinuousRenderer() in the univariateColorSize renderer creator helper object. All that is required for generating a renderer in 3D is a Feature Layer, field name, a symbolType, and a SceneView instance.

var params = {
  layer: povLyr,
  basemap: map.basemap,
  field: "POP",
  view: view,
  symbolType: "3d-volumetric",
  minValue: 0
};

colorAndSizeRendererCreator.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 UnivariateColorSizeSlider.

histogram({
  layer: povLyr,
  field: "POP"
})
  .then(function(histogram){

    // add the histogram to the UnivariateColorSizeSlider

    // size/color visual variables returned from createContinuousRenderer()
    var sizeVVs = lang.clone(response.size.visualVariables);
    var colorVV = lang.clone(response.color.visualVariable);

    var sliderVisualVariables = sizeVVs;
    sliderVisualVariables.push(colorVV);

    var slider = new UnivariateColorSizeSlider({
      statistics: stats,  // stats returned from createContinuousRenderer()
      visualVariables: sliderVisualVariables,
      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