Data-driven opacity

Explore in the sandboxView live

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