Categorical visualizations
Categorical visualizations use a categorical attribute and the categories within it to apply styling to discrete categories of the attribute. On raster datasets, it uses a band instead of an attribute.
Categorical visualizations are defined using "type": "categorical"
and, for every supported style and label property used, either a single value that will apply to all categories or an array of different values for each category.
Vector example
The Global Power Plants layer in Felt is an example of a categorical layer on a vector dataset

and is defined by the following style
{
"version": "2.3",
"type": "categorical",
"config": {
"categoricalAttribute": "primary_fuel",
"categories": ["Solar", "Hydro", "Wind", "Gas", "Coal", "Oil", "Nuclear"],
"showOther": false
},
"legend": {"displayName": {}},
"attributes": {
"capacity_mw": {"displayName": "Capacity (MW)"},
"name": {"displayName": "Name"},
"primary_fuel": {"displayName": "Primary Fuel"}
},
"paint": {
"color": [
"#E5C550",
"#7AB6C2",
"#AB71A4",
"#CC615C",
"#AD7B68",
"#EB9360",
"#DEA145"
],
"isSandwiched": false,
"opacity": 1,
"size": [{"linear": [[3, 1.5], [20, 8]]}]
}
}
Notice that we are saying that the primary_fuel
data attribute will be used to categorize elements and that the possible values of that attribute that we are interested in are "Nuclear"
, "Oil"
, "Coal"
, "Gas"
, "Wind"
, "Hydro"
and "Solar"
. Also notice that we are defining either a single value that will apply to all categories (i.e. size
) or a value for each category (i.e. color
)
Raster example
The Cropscape CDL layer in Felt is an example of a categorical layer on a raster dataset

and is defined by the following style:
{
"version": "2.3",
"type": "categorical",
"config": {
"categories": [
254,
250,
249,
248,
247,
...
4,
3,
2,
1,
0
],
"showOther": false
},
"legend": {
"displayName": {
"0": "Background",
"1": "Corn",
"2": "Cotton",
"3": "Rice",
"4": "Sorghum",
...
"247": "Turnips",
"248": "Eggplants",
"249": "Gourds",
"250": "Cranberries",
"254": "Dbl Crop Barley/Soybeans"
}
},
"paint": {
"color": [
"rgb(38, 113, 0)",
"rgb(252, 105, 101)",
"rgb(252, 105, 101)",
"rgb(252, 105, 101)",
"rgb(252, 105, 101)",
...
"RGB(255, 158, 15)",
"RGB(0, 169, 230)",
"RGB(255, 38, 38)",
"RGB(255, 212, 0)",
"rgba(0, 0, 0, 0)"
],
"isSandwiched": false,
"opacity": 0.93
}
}
Last updated
Was this helpful?