Animate color visual variable [beta]

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)
  }]
}];

This application loads a single FeatureLayer rendered with WebGL. WebGL rendering allows the layer's renderer to update faster than it would if rendered with SVG. It also allows for displaying more features than what is possible in SVG.

For best performance, view this sample in the latest version of Chrome, Firefox, Edge, or Safari.

Additional visualization samples and resources

Searching...

Sample search results

TitleSample

There were no match results from your search criteria.