# 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"`. Ranges are calculated between 3-10 discrete steps using a [classification method](https://gistbok.ucgis.org/bok-topics/statistical-mapping-enumeration-normalization-classification) or on a continuous scale between an attribute’s min and max values. Felt offers the following methods to symbolize numeric data: | Method | Description | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Jenks Natural Breaks | Finds natural groupings in attribute values to minimize differences within steps and maximize differences between them. A good option for clustered data. This is the default method in Felt. | | Equal interval | Divides attribute values into an equal number of steps. Equal interval is a good option when data is equally spread across the range of values. | | Quantiles | Places an equal number of values into each step. A good option for evenly distributed data. | | Mean Standard Deviation | Steps are calculated based on an attribute values distance from the mean. A good option for data that follows a near-normal distribution. | | Manual | Manually define which values to include in each size or color step. A good option when you know your data well. | | Continuous | Attribute values are sized or colored based on a continuous scale between the min and max values versus discrete steps. A good option for continuous data. | #### **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](/files/gSpDmSsTRydhufstabFB) 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 `color` array where each color is applied to a distinct `step` range ```json { "config": { "numericAttribute": "Renter occupied (%)", "steps": {"type": "jenks", "count": 5} }, "label": { "color": ["#d2e2a6", "#9dc596", "#6ba888", "#3e897b", "#096b6d"], "fontSize": 14, "fontStyle": "Normal", "fontWeight": 400, "haloColor": ["#9e9e9e", "#9e9e9e", "#9e9e9e", "#9e9e9e", "#9e9e9e"], "haloWidth": 1.5, "justify": "auto", "letterSpacing": 0.1, "lineHeight": 1.3, "maxLineChars": 10, "maxZoom": 23, "minZoom": 1, "padding": 20, "placement": ["Center"], "visible": true }, "legend": {"displayName": "auto"}, "paint": { "color": "@galaxy", "highlightColor": "hsla(329,81%,64%, 0.5)", "highlightStrokeColor": "hsla(329,81%,64%, 0.8)", "highlightStrokeWidth": {"linear": [[3, 0.5], [20, 2]]}, "isSandwiched": true, "opacity": 0.9, "showAboveBasemap": true, "strokeColor": ["#9e9e9e", "#9e9e9e", "#9e9e9e", "#9e9e9e", "#9e9e9e"], "strokeWidth": 0.5 }, "type": "numeric", "version": "2.3" } ``` **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](/files/w4X6jCav1RrMyUMtb6b2) In this case, the numeric style is applied using a continuous method. * In the `config` block, the `numericAttribute: PRECIP` has `steps` that range between the min and max values of `[2.5,125]` * The `color` property has an array of three colors `["#fde89b", "#f37b8a", "#4d53b3"]` that are interpolated to give each precipitation value a unique color ```json { "config": { "numericAttribute": "PRECIP", "steps": {"count": 1, "type": "continuous"} }, "label": { "color": ["#fde89b", "#f37b8a", "#4d53b3"], "fontSize": 14, "fontStyle": "Normal", "fontWeight": 400, "haloColor": ["#9e9e9e", "#9e9e9e", "#9e9e9e"], "haloWidth": 1.5, "justify": "auto", "letterSpacing": 0.1, "lineHeight": 1.3, "maxLineChars": 10, "maxZoom": 23, "minZoom": 1, "padding": 20, "placement": ["Center"], "visible": true }, "legend": {"displayName": "auto"}, "paint": { "color": "@purpYl", "highlightColor": "hsla(329,81%,64%, 0.5)", "highlightStrokeColor": "hsla(329,81%,64%, 0.8)", "highlightStrokeWidth": {"linear": [[3, 0.5], [20, 2]]}, "isClickable": false, "isSandwiched": true, "opacity": 0.9, "strokeColor": ["#9e9e9e", "#9e9e9e", "#9e9e9e"], "strokeWidth": 0 }, "type": "numeric", "version": "2.3" } ``` {% hint style="info" %} *Any time there are fewer colors than values in a numeric style, they are interpolated in the (*[*hcl color space*](https://en.wikipedia.org/wiki/HCL_color_space)*).* {% endhint %} Felt also supports stepped and continuous color numeric visualizations on raster datasets like you can see on the map below ![](/files/ZCHqkM7oHeRXhgAfT1hX) which includes a raster layer with the following style ```jsx { "version": "2.3" "type": "numeric", "config": {"band": 1, "steps": [-154.46435546875, 7987.457987843631]}, "legend": {"displayName": {"0": "-154.46", "1": "7.99K"}}, "paint": { "isSandwiched": false, "opacity": 1, "color": [ "#454b9f", "#2d79a4", "#18a2a9", "#8cc187", "#e5d96c", "#eab459", "#ef8b45", "#e66250", "#db2d5e" ] } } ``` Notice that in the `config` block we are using `band` instead of `numericAttribute` to define which band will be used for display #### 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. ![](/files/7XOY3rNidIYKIMtYW2U8) 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 ```json { "version": "2.3", "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*](https://felt.com/map/FSL-doc-Earthquakes-Stepped-Size-CQriP6TDT1enA5G6uNhU9CB?lat=-7.797738\&lon=-64.51902\&zoom=4) **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](https://www.un.org/en/black-sea-grain-initiative). The symbol size for each country is proportionate to its value in the data. ![Map link: Black Sea Grain Initiative](/files/kDhnjDUGyMVhMYnR2tun) 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]` ```json { "version": "2.3", "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 } } ``` --- # 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/numeric-visualizations-color-and-size.md?ask= ``` 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.