Data-driven opacity

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to use opacity to visualize an attribute value, in this case median household income.

renderer.visualVariables = [{
  type: "opacity",
  field: "MEDHINC_CY",
  stops: [
    { value: 10000, opacity: 0.2, label: "$10,000" },
    { value: 100000, opacity: 0.85, label: "$100,000"  }
  ]
}];

Any combination of visual variables may be used to add context or draw more attention to spatial patterns in a dataset. In this case, opacity is the only visual variable used in the renderer. However, opacity, size, and color visual variables may all be applied to a renderer to create multivariate visualizations.

Additional visualization samples and resources

• Data-driven continuous color
• Data-driven continuous size
• Data-driven extrusion
• Thematic multivariate visualization (2D)
• Thematic multivariate visualization (3D)