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

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.

  • {}
  • Firefox
  • Safari
  • undefined

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

This sample visualizes the construction years of more than 1 million buildings in New York City using an HTML slider and requestAnimationFrame(). The slider allows the user to explore building construction relative to a specified year. A Color visual variable is used to visualize each building based on its construction year relative to the slider value. For example, if a value of 1984 is selected, then buildings built in 1984 are shaded with a light blue color. Buildings built prior to that year are progressively shaded along a blue to pink ramp depending on the building year. Buildings built 20+ years prior to the selected year are shaded with a pink color. In addition, we apply bloom effect on the layer to make the buildings pop on the map. Click the "Play" button to animate the slider between the years 1880 and 2017. This provides a nice depiction of construction activity in that time span.

This visualization is achieved using the color visual variable in the following manner:

renderer.visualVariables = [
    type: "color",
    field: "CNSTRCT_YR",
    legendOptions: {
      title: "Built:"
    // year is the slider value set by the user
    stops: [
        // buildings built in the given year are blue
        value: year,
        color: "#0ff",
        label: "in " + Math.floor(year)
        // if built 0 - 20 years prior to the slider value then
        // the color is interpolated between blue and pink
        value: year - 20,
        color: "#f0f",
        label: "in " + (Math.floor(year) - 20)
        value: year - 50,
        color: "#606",
        label: "before " + (Math.floor(year) - 50)

Additional visualization samples and resources

Sample search results