Note: Support for 3D on mobile devices may vary, view the system requirements for more information.
This sample visualizes the winner of the 2008 U.S. presidential election for each voting precinct in the country. The color of each point indicates the winner: blue for Obama and red for McCain. Size represents the total number of votes cast at that polling station. FeatureLayerView effect is used to visualize the gap, or margin of victory, between the winner and second place candidate.
The effect set on the features depends on the value of the Slider. If the slider position is near the "Contested" label, then features that have the drop-shadow effect applied represent precincts where the winner either tied or won by a very small margin. As the slider handle moves toward "Landslide", the features with the drop-shadow effect represent precincts where the winner won by larger margins. The features that fall outside of the current gap percentage value have blur, grayscale and opacity effects applied to them so that they will be subdued on the map. Click the "Play" button to animate the slider between "Contested" and "Landslide" to explore hotly contested areas, and those areas where the second place candidate never really had a chance at victory.
/**
* Creates an effect centered around a gap between the 2 candidates.
* If the precincts have the specified gap percentage, drop-shadow
* effect is applied to make them stand out from the rest. If they
* fall outside of the specified gap percentage, grayscale, blur
* and opacity effects are applied to subdue their presence.
*/
function createEffect(gapValue) {
gapValue = Math.min(100, Math.max(0, gapValu
function roundToTheTenth(value) {
return Math.round(value * 10) / 10;
return {
filter: {
where: `PERCENT_GAP > ${roundToTheTenth(gapValue - 1)} AND PERCENT_GAP < ${roundToTheTenth(gapValue + 1)}`
},
includedEffect: "drop-shadow(0, 2px, 2px, black)",
excludedEffect: "grayscale(25%) blur(5px) opacity(25%)"
}
}