You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

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

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.

const params = {
  layer: layer,
  field: "POP",
  view: view,
  symbolType: "3d-volumetric",
  minValue: 0,
  maxValue: 1500000

colorAndSizeRendererCreator.createContinuousRenderer(params).then(function(response) {
  // set the renderer to the layer
  povLayer.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 ColorSizeSlider.

  layer: layer,
  field: params.field,
  numBins: 40,
  minValue: params.minValue,
  maxValue: params.maxValue
.then(function(histogramResult) {

  const slider = ColorSizeSlider.fromRendererResult(rendererResult, histogramResult);
  slider.container = "slider";

  view.ui.add("containerDiv", "bottom-left");

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.

function changeEventHandler () {
  var renderer = layer.renderer.clone();
  renderer.visualVariables = slider.updateVisualVariables(renderer.visualVariables);
  layer.renderer = renderer;

slider.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 Visualization overview: Smart mapping API 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

Sample search results