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.

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {i18n.unsupportedBrowser.chrome}
  • Firefox
  • Safari
  • undefined
Loading...

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

This sample demonstrates how to apply a size visual variable to extrude features thematically based on a numeric field value. The same basic principles of working with size visual variables reviewed in the Visualize features thematically with a continuous size ramp sample also apply to 3D thematic visualizations.

However, when working with volumetric symbol layers such as ExtrudeSymbol3DLayer, PathSymbol3DLayer, and ObjectSymbol3DLayer size values are always expressed in real-world units (meters).

var renderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: {
    type: "polygon-3d", // autocasts as new PolygonSymbol3D()
    symbolLayers: [{ type: "extrude" }] // autocasts as new ExtrudeSymbol3DLayer()
  },
  label: "% population in poverty by county",
  visualVariables: [
    {
      type: "size", // indicates this is a size visual variable
      field: "POP_POVERTY", // total population in poverty
      normalizationField: "TOTPOP_CY", // total population
      stops: [
        {
          value: 0.1, // features where < 10% of the pop in poverty
          size: 10000 // will be extruded by this height in meters
        },
        {
          value: 0.5, // features where > 50% of the pop in poverty
          size: 500000 // will be extruded by this height in meters
        }
      ]
    },
    {
      type: "color",
      field: "POP_POVERTY",
      normalizationField: "TOTPOP_CY",
      stops: [
        {
          value: 0.1,
          color: "#FFFCD4"
        },
        {
          value: 0.35,
          color: [153, 83, 41]
        }
      ]
    }
  ]
};

In 3D, attempting to distinguish features of varying sizes from various distances can be problematic. Because of perspective, it is difficult to perceive spatial size differences between features. For that reason it is a good idea to add a color visual variable for the same field when extruding features thematically.

Additional visualization samples and resources

Sample search results

TitleSample
Loading...