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 scene.
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 Scene component.
// Configure parameters for the renderer generator. // the layer must be specified along with a field name // or arcade expression. The view and other properties determine // the appropriate default color and size schemes. const params = { layer: layer, field: "POP", view: viewElement.view, symbolType: "3d-volumetric", minValue: 0, maxValue: 1500000, };
// Generate a renderer visualizing a single variable // with continuous color and size based on the // statistics of the data in the provided layer // and field name. // // This resolves to an object containing several helpful // properties, including size/color schemes, statistics, // the renderer, and visual variables const colorSizeRendererResult = await colorAndSizeRendererCreator.createContinuousRenderer(params); layer.renderer = colorSizeRendererResult.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 updateFromRendererResult().
// Generate a histogram for use in the slider. Input the layer // and field name to generate it. // You can also use an arcade expression instead of // a field and normalization field const histogramResult = await histogram({ layer: layer, field: params.field, numBins: 40, minValue: params.minValue, maxValue: params.maxValue, }); colorSizeSlider.updateFromRendererResult(colorSizeRendererResult, histogramResult);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.
// When the user slides the handle(s), update the renderer // with the updated color and size visual variable objects function changeEventHandler() { const renderer = layer.renderer.clone(); renderer.visualVariables = colorSizeSlider.updateVisualVariables(renderer.visualVariables); layer.renderer = renderer; } colorSizeSlider.addEventListener("arcgisThumbChange", changeEventHandler); colorSizeSlider.addEventListener("arcgisThumbDrag", changeEventHandler); colorSizeSlider.addEventListener("arcgisPropertyChange", 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.