Data-driven opacity

This sample demonstrates how to add an opacity visual variable to an existing renderer. A UniqueValueRenderer is saved to the layer, depicting the most common educational attainment acheived by adults living in each U.S. Census block group. The opacity visual variable adds a transparency value to each feature based on the total population in the feature.

renderer.visualVariables = [{
  type: "opacity",
  field: "EDUCBASECY",
  stops: [
    { value: 700, opacity: 0.1 },
    { value: 1500, opacity: 0.9 }
  ]

  // features with a population between 700 - 1,500 people will be assigned
  // an opacity value proportional to the specified range.
  // e.g. if a feature has a population of 1,100 people, then it will
  // have an opacity value of 0.9

}];

This adds context to the story told in the application. While some attainment levels, such as "no high school" appear to dominate some block groups, the opacity visual variable shows how many people live in the block group relative to other block groups.

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.

Also note that properties of a renderer already set on a layer may not be altered. To add or modify an existing renderer on a layer, you must clone it, modify its properties, and then reset the new renderer on the layer.

// renderer properties cannot be deeply modified,
// so you must clone the renderer
var renderer = edLyr.renderer.clone();

// add visual variables
renderer.visualVariables.push( [ visVar1, visVar2, etc ]);

// set the new renderer back on the layer
edLyr.renderer = renderer;

Additional visualization samples and resources

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