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