Animate color visual variable

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:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.