Numeric visualizations (color & size)

Numeric visualizations use a numeric attribute to either vary colors or sizes between ranges of values and are defined in FSL with "type": "numeric".

Vary color or size, not both at once — pick the single visual variable that best carries your message. Color reads as a choropleth; size reads as proportional symbols ("bigger = more"). Polygons support color only.

Ranges are calculated across discrete steps using a classification method, or on a continuous scale between an attribute’s min and max values. See Classification methods for the full list (jenks, quantiles, equal-intervals, stddev, geo-intervals, continuous) and how to express steps.

Color

Color numeric values in your data using the color property.

Stepped color

This map shows the percent of renter occupied housing units by US county. Each county is colored according to the step of ranges it falls into using a sequential color palette where light colors are assigned to low values and darker colors for high values.

Map link: Percent renter occupied housing by county

The style for this map is defined

• with the visualization type: numeric

• numericAttribute: "Renter occupied (%)" and the computed steps using Jenks Natural Breaks over 5 classes

• the sequential @galaxy palette, which Felt expands to one color per class — light colors for low values, dark for high

{
  "version": "2.3.1",
  "type": "numeric",
  "config": {
    "numericAttribute": "Renter occupied (%)",
    "steps": {"type": "jenks", "count": 5}
  },
  "paint": {
    "color": "@galaxy",
    "opacity": 0.9,
    "strokeColor": "auto",
    "strokeWidth": 0.5,
    "isSandwiched": true
  },
  "legend": {"displayName": "auto"}
}

Continuous Color

The map below shows average accumulated precipitation in the State of California between the years 1900 - 1960 and is colored along a continuous range between the min and max of the precipitation values.

Map link: Average annual precipitation

In this case, the numeric style is applied using a continuous method.

• In the config block, numericAttribute: PRECIP uses the {"type": "continuous"} steps shortcut, so values scale across the attribute's full min–max range

• The color property uses the sequential @purpYl palette, whose colors are interpolated to give each precipitation value a unique color

{
  "version": "2.3.1",
  "type": "numeric",
  "config": {
    "numericAttribute": "PRECIP",
    "steps": {"type": "continuous"}
  },
  "paint": {
    "color": "@purpYl",
    "opacity": 0.9,
    "strokeColor": "auto",
    "strokeWidth": 0,
    "isClickable": false,
    "isSandwiched": true
  },
  "legend": {"displayName": "auto"}
}

Any time there are fewer colors than values in a numeric style, they are interpolated in the (hcl color space).

Numeric color also works on raster datasets, using band instead of numericAttribute — see Raster visualizations.

Size

Size numeric values in your point or line data using the size property.

Stepped size

The map below shows earthquakes over the past year sized with 5 manually defined steps.

In this case, the numeric style is applied using a classed method.

• In the config block, the numericAttribute: mag has manually-defined steps for 5 classes

• The size property has an array of five sizes, one for each defined class

{
  "version": "2.3.1",
  "type": "numeric",
  "config": {"numericAttribute": "mag", "steps": [4.5, 5.5, 6, 7, 7.5, 8.2]},
  "legend": {"displayName": "auto"},
  "paint": {
    "size": [5, 10, 12, 14, 16],
    "color": "hsl(0, 13%, 45%)",
    "opacity": 0.9,
    "strokeColor": "hsl(0, 13%, 88%)",
    "strokeWidth": 1.5
  }
}

Map link: Earthquakes Stepped Size

Continuous size

The map below shows tonnes of corn that have been exported from Ukraine since August 2022 under the UN’s Black Sea Grain Initiative. The symbol size for each country is proportionate to its value in the data.

Map link: Black Sea Grain Initiative

To do this the min and max steps from the numericAttribute: tonnes are interpolated to be proportionately sized between a min and max point size — size:[5,48]

{
  "version": "2.3.1",
  "type": "numeric",
  "config": {
    "steps": [33000, 2344684],
    "numericAttribute": "tonnes",
    "labelAttribute": ["category"]
  },
  "label": {
    "minZoom": 1,
    "color": "#5a5a5a",
    "fontSize": 14,
    "fontStyle": "Normal",
    "fontWeight": 500,
    "haloColor": "#d0d0d0",
    "haloWidth": 1.5,
    "offset": [8, 0]
  },
  "legend": {"displayName": {"0": "2.34M", "1": "714.65K", "2": "33K"}},
  "paint": {
    "size": [5, 48],
    "color": "hsl(22, 78%, 65%)",
    "opacity": 0.9,
    "strokeColor": "hsl(22, 78%, 88%)",
    "strokeWidth": 1.5
  }
}

Notes on steps, color, and size

• Let Felt compute breaks when you don't have the data in front of you: "steps": {"type": "jenks", "count": 5}. Provide explicit breaks ([0, 3, 5, 7, 9]) when you know the values you want. See Classification methods.

• Classed arrays carry one value per class. With N break points you get N − 1 classes, so explicit color/size arrays need N − 1 entries.

• Continuous size is written as [min, max] (e.g. [3, 30]) and scales smoothly; proportional-symbol sizes typically range 3–30 px for points. On lines, size is width in pixels (typically 1–20 px), not a radius.

• Continuous size legends use inverted indices for historical reasons: "0" labels the maximum value, "1" the midpoint, and "2" the minimum (as in the example above). Continuous color legends run the intuitive way: "0" is the minimum. See Legends.

• Icons can vary by value too — set iconImage and let size (or color) carry the numeric variable:

{
  "version": "2.3.1",
  "type": "numeric",
  "config": {"numericAttribute": "beds", "steps": {"type": "jenks", "count": 4}},
  "paint": {
    "iconImage": "hospital",
    "iconFrame": "frame-circle",
    "color": "#E74C3C",
    "size": [3, 4, 5, 6],
    "opacity": 0.9,
    "isClickable": true
  },
  "legend": {"displayName": "auto"}
}