This sample demonstrates how to effectively create a multivariate data visualization using three visual variables to represent three data values related to current weather conditions:
Visual variables visualize data along a continuous ramp allowing the data to speak for itself rather than be confined to arbitrary class breaks.
Color
Overrides the color of a renderer's symbols based on a data value.
const colorVariable = {
type: "color",
// attribute field to visualize
field: "TEMP",
// map data values to colors
// all other values are linearly interpolated
stops: [
{ value: 20, color: "#2b83ba" },
{ value: 35, color: "#abdda4" },
{ value: 50, color: "#ffffbf" },
{ value: 65, color: "#fdae61" },
{ value: 80, color: "#d7191c" }
]
}Size
Overrides the size of a renderer's symbols based on a data value.
const referenceScale = 9244650;
const sizeVariable = {
type: "size",
// attribute value to visualize
field: "WIND_SPEED",
// features with the minDataValue are bounded to the minSize
minDataValue: 0,
// features with the maxDataValue are bounded to the maxSize
maxDataValue: 60,
minSize: {
type: "size",
valueExpression: "$view.scale",
// adjust the minSize of the features by scale
stops: [
{ value: referenceScale, size: 8 },
{ value: referenceScale*2, size: 6 },
{ value: referenceScale*4, size: 4 },
{ value: referenceScale*8, size: 2 }
]
},
maxSize: {
type: "size",
valueExpression: "$view.scale",
// adjust the max size by scale
stops: [
{ value: referenceScale, size: 40 },
{ value: referenceScale*2, size: 30 },
{ value: referenceScale*4, size: 20 },
{ value: referenceScale*8, size: 10 }
]
}
};Rotation
Rotates symbols based on the value of an attribute field. The value is literally interpreted as the geographic angle on the map.
const rotationVariable = {
type: "rotation",
field: "WIND_DIRECT",
rotationType: "geographic"
};A word of caution
While you can add more than one visual variable to a renderer, using too many visual variables can make the map confusing and difficult to read. This is a good example of when two or more visual variables work well together because they are related to one another.
Visualizing multiple data attributes that aren't related to one another is misleading and can cause confusion for the map reader.