Color by Value

When you style numeric data by color, we default to the Jenks Natural Breaks classification method and color features with one of our sequential color palettes. We do this because Jenks is good at finding natural groupings of values in data and our sequential color palettes are designed to help visually distinguish features on the map from low to high values.

Fine-tuning these defaults is simple and intuitive with our enhanced Style Editor. Felt’s editor includes quantiles, equal intervals, standard deviation, and continuous classification methods, as well as the ability to set a specific number of steps. You can quickly try different methods and styles and watch your map and legend dynamically update as you do it. That helps you make the best decisions based on your data and map’s story.

Every decision you make in the Style Editor is reflected in a Felt Style that is viewable and editable through the Advanced Editor.

Color Interpolation

To color features using a numeric value, we take advantage of color interpolation in Felt Style Language. Whatever the classification method, color interpolation uses one of Felt’s numeric palettes to create the number of colors needed. We do this in the perceptually uniform HCL color space to create colors that are more aesthetically pleasing and based on how the human eye perceives them.

Looking at the Felt Style from the map above, you’ll notice a few things:

• in the <p-inline>config<p-inline> block the min and max values for the <p-inline>numericAttribute: contour<p-inline>, are defined with <p-inline>steps: [100, 13700]<p-inline>
• in the <p-inline>style<p-inline> block, the <p-inline>color<p-inline> property provides an array of the three colors <p-inline>["#4b5899", "#2cbaa8", "#e8e873"]<p-inline> that will be interpolated to assign a color to every single value between <p-inline>[100, 13700]<p-inline>

Size by Value

By default, points and lines are sized across the full range of values in the data using the continuous method. This is a good option when you want to give a more nuanced view across all values versus grouping them into stepped ranges.

Felt applies smart scaling to points and lines by calculating proportionate sizes for each value across a numeric attribute. Simply define your maximum symbol size via the Style Editor, and we’ll take care of the rest including a legend appropriate for this visualization type.

Below are two examples of proportionately sized point and line symbols.

In the Felt Style for the proportionately sized circles, we use the minimum and maximum values defined as <p-inline>steps<p-inline> in the <p-inline>config<p-inline> block to calculate proportionately sized circles between a default minimum and user defined maximum for the <p-inline>size<p-inline> property in the <p-inline>style<p-inline> block.

The associated Felt Style uses the same logic for lines as for points where the <p-inline>size<p-inline> of each line is calculated proportionately to the minimum and maximum <p-inline>steps<p-inline> of the <p-inline>numericAttribute<p-inline>

Taking it further with Felt Style Language

While the Style Editor allows you to use the values of a numeric column to either change the color or size of features, the Advanced Editor allows you to use the values of a numerical column on any style or label property.

The ability to use different visual properties along a range of numeric values gives more style control. The way it happens in Felt Style Language means you only have to define the attribute and values one time in the <p-inline>config<p-inline> block.

Color properties like <p-inline>color<p-inline>, <p-inline>strokeColor<p-inline>, <p-inline>fontColor<p-inline> are interpolated in the HCL color space, <p-inline>size<p-inline> is proportionate to the feature values and all other properties like <p-inline>fontSize<p-inline>, <p-inline>strokeWidth<p-inline> and <p-inline>opacity<p-inline> are linearly interpolated.

This map shows the locations of mass shootings in the US for the year 2022 through January 23, 2023 using the US Mass Shooting Database from Mother Jones.

The <p-inline>size<p-inline> of each location is proportionate to the range of values in the <p-inline>numericAttribute: fatalities<p-inline>. For additional visual impact of the most deadly shootings, the <p-inline>strokeWidth<p-inline> and <p-inline>fontSize<p-inline> are linearly interpolated across the same value.

This map of rivers in India is made using data from HyrdoRIVERS. The style technique used on this map combines a variation in <p-inline>size<p-inline> and <p-inline>color<p-inline> along the same <p-inline>numericAttribute<p-inline> to visually bring major river segments to the foreground and push smaller ones to the background.

With the same <p-inline>numericAttribute<p-inline> and <p-inline>steps<p-inline> you can try other things like interpolating <p-inline>size<p-inline> combined with <p-inline>opacity<p-inline> to produce a different visual effect:

Try It Yourself At Office Hours

Felt makes it easier than ever to quickly and easily visualize numeric data with its smart defaults, custom color palettes, numerous classification options and intuitive point-and-click styling options. With Felt, users can create beautiful and informative maps in a matter of minutes, taking the guesswork out of data visualization.

To help Felts unlock all the hidden features and be successful at working with our updated Style Editor and Felt Style Language, we’re piloting a new type of event — Felt Office Hours. Sign up and get a 1:1 consulting session with our in-house cartographer Mamata Akella to bring your mapping project to a new level!

How to participate:

• Register on Zoom
• Fill in this Google Form to share your question
• We are just piloting this format, so we will approve only five users to join us. Please, make sure you fill in the Google Form — without it, we can’t review or approve participants.
• If you're not approved, don't worry — our team will get back to you and try to help you asynchronously!