Animate opacity visual variable [beta]

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. An opacity visual variable is used to represent the gap, or margin of victory, between the winner and second place candidate.

The opacity of features depends on the value of the slider. If the slider position is near the "Contested" label, then opaque features represent precincts where the winner either tied or won by a very small margin. As the slider handle moves toward "Landslide", opaque features represent precincts where the winner won by larger margins. Transparent features indicate precincts where the margin of victory falls outside +/- 2.5% points of the slider value. 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.

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


Sample search results