# 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

![](/files/DK11QRpkbreaYa33GkZ5)

and is defined by the following style

```jsx
{
  "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

![Screenshot 2024-04-12 at 13.25.09.png](/files/tu2VIzsNNhnVSaS7xj9d)

and is defined by the following style:

```jsx
{
  "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
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.felt.com/felt-style-language/types-of-visualizations/categorical-visualizations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
