(ArcGIS API for JavaScript) Extrusion 3D and Unique Renderer

Sample.js

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/layers/FeatureLayer",
    "esri/symbols/PolygonSymbol3D",
    "esri/symbols/ExtrudeSymbol3DLayer",
    "esri/renderers/SimpleRenderer",
    "esri/renderers/UniqueValueRenderer",
    "dojo/domReady!"
  ],
  function (Map, SceneView, FeatureLayer, PolygonSymbol3D, ExtrudeSymbol3DLayer, SimpleRenderer, UniqueValueRenderer) {
    // For extrusion you first need a renderer which is a container for the symbols
    //This sample is showing extrusion and unique rendering

    function rankArea(feature) {
      var area = feature.attributes.AREA;
      var rank;
      if (area < 20000000000) {
        rank = "low";
      } else if (area > 20000000000 && area < 50000000000) {
        rank = "medium";
      } else if (area > 50000000000) {
        rank = "high";
      }
      return rank;
    }

    var sym1 = new PolygonSymbol3D({
      symbolLayers: [new ExtrudeSymbol3DLayer({
        size: 5000, // Height of the extrusion in meters
        material: {
          color: "blue"
        }
      })]
    });

    var sym2 = new PolygonSymbol3D({
      symbolLayers: [new ExtrudeSymbol3DLayer({
        size: 10000, // Height of the extrusion in meters
        material: {
          color: "red"
        }
      })]
    });

    var sym3 = new PolygonSymbol3D({
      symbolLayers: [new ExtrudeSymbol3DLayer({
        size: 15000, // Height of the extrusion in meters
        material: {
          color: "yellow"
        }
      })]
    });

    var renderer = new UniqueValueRenderer({
      field: rankArea, // values returned by this function will
      // be used to render features by type
      uniqueValueInfos: [{
        value: "high", // features labeled as "High"
        symbol: sym3 // will be assigned sym1
      }, {
        value: "medium", // features labeled as "Medium"
        symbol: sym2 // will be assigned sym2
      }, {
        value: "low", // features labeled as "Low"
        symbol: sym1 // will be assigned sym2
      }]
    });



    var myRenderer = new SimpleRenderer({
      symbol: new PolygonSymbol3D({
        symbolLayers: [new ExtrudeSymbol3DLayer()]
      }),
      visualVariables: [{ //Used to set the visual attributes of the render, uses data driven aspects
        type: "size",
        field: "AREA",
        stops: [{
            value: 0,
            size: 10000
          },
          {
            value: 10000,
            size: 500000
          }
        ]
      }, {
        type: "color",
        field: "MP03002a_B",
        stops: [{
            value: 0,
            color: "#4256f4"
          },
          {
            value: 1000,
            color: "#f44271"
          }
        ]
      }]
    });

    var myfeaturelayer = new FeatureLayer({
      url: "link to feature server",
      outFields: ["*"],
      renderer: renderer
    });

    myfeaturelayer.then(function () {
      myfeaturelayer.queryFeatures().then(function (results) {
        results.features.forEach(function (element) {
          console.log(Math.floor(element.attributes.AREA)); //PERIMETER,
        }, this);
      });
    });

    var map = new Map({
      basemap: "dark-gray",
      ground: "world-elevation",
      layers: [myfeaturelayer]
    });

    var view = new SceneView({
      container: "viewDiv",
      map: map,

    });
    view.on("click", function (evt) {
      console.log(evt.mapPoint);
    });
  });