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