Data-driven opacity

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

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

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