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. 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