Data-driven opacity

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

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.