Step By Step: A Guide on How ESI Uses CARTO

The two first posts in our Step-by-Step series demonstrated how ESI uses R for data manipulation and graphing and ESRI to map the economics and demographics of a select geographic area. This third installment will show you how we use CARTO, a GIS and web mapping tool. 

Mapping with CARTO Builder

Digital mapping is a powerful medium that can quickly communicate information to a broad audience. Interactive maps can support the stories you seek to tell while helping readers engage with your message on a deeper level. There are several mapping applications that can help visualize geospatial data. One of the most popular, and my personal favorite, is CARTO (formerly known as CartoDB), a web-based drag-and-drop tool that is free and easy to use. CARTO offers a wide variety of customization options and has great documentation for beginners and advanced users. Below is an example of a map ESI used in a recent analysis, which depicts and compares banking disparities in over 20 major American cities. I will be using it here as a reference, but you can view this post for a more detailed overview of our banking analysis.

Let’s get started – loading point data

After signing up for an account, you can load your data into the dataset dashboard. Click on the New Map or Dataset icon, and select the file you wish to visualize under Connect Dataset. My data is an excel sheet that includes latitude and longitude coordinates from various cities across the country. Because my file contains coordinate points, CARTO automatically recognizes and converts this information into spatial data.

Connect dataset

Once the dataset is connected, CARTO will open the file in the Map View.

Map View

By default our data is in a standard point format and has not been customized.


Creating Graduated Choropleths in CARTO

Some of the fields in my sheet have a quantitative measure of the banking disparity per city. There are many different ways of visualizing this kind of data, but I chose to represent this data using a graduated symbol map (a “bubble” map), in which the size of the symbols is proportional to the value of the attribute being mapped. Bubble maps are useful for visualizing magnitudes or total values (i.e., “I can tell that this one is larger than that one”). In addition, choropleth maps use shading and coloring to distinguish different classes of values within a column. Traditionally, darker colors represent larger numbers or values. In terms of stylization, I used the values found in one column to visualize bubble size and color simultaneously. In CARTO, we can customize our points by value under the Style menu, shown after clicking a layer.

CARTO provides wizards and other tools for styling data. You can customize your points under the Style menu, shown after clicking on your layer. For this map, I decided to display two values simultaneously. I used one absolute value to display bubble size and one relative size to display by color.


CARTO now allows styling of two values simultaneously without the use of CSS. You simply repeat the same styling under both Fill options.


Advanced Legends with HTML/CSS

One issue that comes from styling these two values simultaneously is that the legend visualizes them separately. A better-styled legend would merge them, like so:

Legend 1



Left: Legend with values displayed separately. Right: Combined legend with values displayed together.

In order to fix this, we will have to customize the legend using some CSS styling. Under the Legend tab, select a Custom style and at the bottom, toggle the layer to HTML. The advantage with HTML/CSS is that we can make edits directly in CARTO. In our styling, we will need to define the <ul> tag together with the <li> tag to create a bulleted list. Note that CARTO uses CartoCSS, a CSS-like syntax that enables the customization of map symbolizer properties (such as point size and color). CARTO includes a CartoCSS reference accessible online. Below is an example snippet of the legend CSS.

Code 1

In this example, <p> is where the text or values are stored, and the <span> tag controls the position of the circle.

You can view the full code for this legend here.

0 to 1


We can also add some text below the list tag to provide some context, using <br> to break elements.


Below is the finished legend.


An Open Platform

We have explored the various options for improving the appearance and experience of an interactive map, but there is so much more to CARTO. Its interface is relatively intuitive and easy to work with, allowing beginners and advanced users to visualize and analyze spatial data. Even though I mentioned the use of HTML, no programming background is required in order to create a nice looking map. CARTO provides clear templates that can help create great visuals, and an added benefit is that the software is open sourced allowing a user to tailor their setup and share what they’ve created. CARTO also provides great tutorials and a FAQ section if you need support.

The map we used in this example, helps policy makers, banking institutions, and local citizens better understand how shifts in policy can impact the banking industry in a transparent and unbiased manner. We use CARTO often, and you can see other examples of ESI maps here.


Carlos Bonilla is a Research Analyst at Econsult Solutions, Inc. with a focus in economic and environmental issues in urban areas. At ESI, Carlos applies a strong background in spatial analysis, cartography, and data visualization. Prior to joining the team, Carlos worked as a fellow for Azavea’s Summer of Maps, a program that pairs students with local and national non-profits to perform geospatial analysis.

Share This