<aside> 👋 The Felt Style Language is a way for advanced users to style data quickly, through simple code. This document is a guide to use as you test data files in Felt. For an exhaustive guide to all supported properties see the Reference Documentation.

</aside>

Felt Styles

The shape of a style definition

A style in its most basic form contains a version definition and datasets and visualizations blocks.

The datasets block is where information about the data itself is stored. With this block, you can change the attributes that appear on the popup when you click on a feature, format the data itself, replace column names, etc. Take a look at the datasets section below to read more on this.

The visualizations block is where you define how the data should be visualized on the map. With this block, you can change colors, add labels, move features from back to front, etc. For more information on this, take a look at the visualizations section below.

{
  "version": "1.2",
  "datasets": [ { "id": "this-is-an-example-id" } ],
  "visualizations": []
}

The datasets block

The datasets block contains information on each dataset that’s included in your layer.

These are the fields that each dataset block can contain:

Field name Description
id The dataset id. This will be prepopulated for you.
name Optional. Human readable text.
attributes Optional. An object that defines how data attributes will be shown. See the https://feltmaps.notion.site/Felt-Style-Language-de08179cb8494d3d8bbf5fb970f03fd0 section below for more information. In the example below we are defining how attributes faa and wikipedia, which are fields in our dataset, will be shown.
keyAttributes Optional. A subset of attributes that will be shown when a user clicks on a feature. If empty, all attributes will be shown.
titleAttribute Optional. The attribute that will be used as the popup title.
"datasets": [
	{
    "id": "this-is-an-example-id",
		"name": "My data layer",
		"attributes": {
			"faa": {"displayName": "FAA Code", "format":"x"},
			"wikipedia": {"displayName": "Wikipedia"},
		},
		"keyAttributes": ["FAA"],
		"titleAttribute": "faa"
	}
]

Attribute definition

An attribute is defined as a named block that contains information about how this attribute will be used and shown in Felt. In the example below, attribute_name is the name of a field in our dataset.

"attribute_name": { "displayName": "Attribute", "format": "x"}

Each attribute block might contain one of the following fields:

Field name Description
displayName Optional. How this attribute will be shown in different parts of the Felt UI.
format Optional. A https://github.com/d3/d3-format#d3-format string that encodes how numeric fields should be shown.

The visualizations block