Animate color visual variable


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