All pages
Powered by GitBook
1 of 6

Types of visualizations

Simple visualizations

Simple visualizations are those that show each feature in a vector dataset using the same style or the image as it is in raster ones.

Simple visualizations must define "type": "simple" and a single value for each supported style and label properties.

Vector example

The Airports layer in Felt is an example of a simple visualization using a vector dataset

and is defined by the following style:

{
  "attributes": {
    "ele": {"displayName": "Elevation (meters)"},
    "faa": {"displayName": "FAA Code"},
    "iata": {"displayName": "IATA Code"},
    "icao": {"displayName": "ICAO Code"},
    "name": {"displayName": "Name"},
    "name_en": {"displayName": "Name (EN)"},
    "wikipedia": {"displayName": "Wikipedia entry"}
  },
  "config": {"labelAttribute": ["name_en", "name"]},
  "filters": [["name", "isnt", null], "and", ["name", "ne", ""]],
  "label": {
    "color": "hsl(40,30%,40%)",
    "fontSize": {"linear": [[12, 12], [20, 20]]},
    "fontStyle": "Normal",
    "fontWeight": 400,
    "haloColor": "hsl(40,20%,85%)",
    "haloWidth": 1.5,
    "justify": "auto",
    "letterSpacing": 0.1,
    "lineHeight": 1.2,
    "maxLineChars": 10,
    "maxZoom": 23,
    "minZoom": 10,
    "offset": [8, 0],
    "padding": 10,
    "placement": ["E", "W"],
    "visible": true
  },
  "legend": {},
  "paint": {
    "color": "hsl(40,30%,80%)",
    "highlightColor": "#EA3891",
    "highlightStrokeColor": "#EA3891",
    "highlightStrokeWidth": {"linear": [[3, 0], [20, 2]]},
    "isSandwiched": false,
    "opacity": 1,
    "size": {"linear": [[3, 1], [20, 6]]},
    "strokeColor": "hsl(40,20%,55%)",
    "strokeWidth": {"linear": [[3, 0.5], [20, 2]]}
  },
  "version": "2.3"
}

Raster example

This is an example of a simple visualization using a raster dataset

and is defined by the following style:

{
  "version": "2.3",
  "type": "simple",
  "config": {},
  "paint": {"isSandwiched": false, "opacity": 0.93}
}

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

Screenshot 2024-04-12 at 13.25.09.png

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
  }
}

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 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

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

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

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

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

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

Felt also supports stepped and continuous color numeric visualizations on raster datasets like you can see on the map below

which includes a raster layer with the following style

{
  "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.

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",
  "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",
  "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
  }
}

Heatmaps

Heatmaps are used to visualize the density of points on a map.

Heatmaps visualizations are defined using “type”: “heatmap” and, allow the following properties to be set:

Field name
Description

color

An array of colors that will be used in the heatmap. From less density to more.

size

Controls the size of each point.

intensity

Controls the intensity of a heightmap.

This is an example of a heatmap visualization

defined with the following visualization

{
  "version": "2.3",
  "type": "heatmap",
  "config": {},
  "legend": {"displayName": {"0": "Low", "1": "High"}},
  "paint": {"color": "@purpYlPink", "size": 10, "intensity": 0.2}
}

Heatmaps do not support labels.

Hillshade

Hillshades are used to visualize the valleys and ridges encoded in elevation raster data.

Hillshade visualizations are defined using “type”: “hillshade” and, support the following properties:

Field name
Description

color

An array of colors that will be used in the hillshade. From less elevation to more.

source

The light angle. 0 is North, 90 East, …

intensity

Controls the intensity of a hillshade.

The following map is an example of a raster layer using a hillshade visualization

with the following style

{
  "version": "2.3",
  "type": "hillshade",
  "config": {"band": 1},
  "legend": {},
  "paint": {"isSandwiched": false}
}

Felt also supports adding color to hillshades by defining a color property in the style

which is defined by the following style

{
  "config": {"band": 1, "steps": [-154.46435546875, 7987.457987843631]},
  "legend": {},
  "type": "hillshade",
  "version": "2.3",
  "paint": {
    "isSandwiched": false,
    "color": "@feltHeat",
    "source": 315,
    "intensity": 0.76
  }
}