Sergio Álvarez

Data Mountains: Visualizing Bivariate Maps in a Different Way

Lately, there has been a lot happening at CARTO related to the visual exploration of location data. We’ve been researching, for quite a while, new ideas for visualizing thematic information on the web. Apart from color, we might have something to share with you soon, we are investing time experimenting with different methods for symbolizing data, and a set of tools to drill-down into other (non-visual) attributes of the data.

Some of the results from those experimentations come from our Senior Digital Cartographer, Mamata Akella, who inspired by maps like [this] and this, came up with an uncomplicated and astonishing idea, using SVG markers and a simple set of CartoCSS rules, to create a “Data Mountain Map”. What is so neat about this, is that with some simple CartoCSS tricks she achieved a great way of creating perspective maps that avoid some of the typical problems that occur with Bubble Maps when visualizing this kind of data.


Request a live demo

This, together with deep-insights.js helps us detect patterns and outliers. For example, you can explore a county near Santa Fe, where people spend under 20% of their income on rent, or locations that appear more expensive like San Francisco, Los Angeles, NYC, and DC and discover that people spend a lot on rent, but it still remains under 30% of their household income. On the other hand, if we filter to see where people spend most of their income on rent we see places like Miami, where they spend more than 40% of their income.

Data Mountains Insights

Even as an experimental project, we can see how well it works for visualizing clusters of high values (mountains) without hiding the lower values. It also plays very well with colors, white space, and creates a nice effect when tweaking the filters.

Creating your own Data Mountains Map

Create a grid with your data

First, you’ll need to snap your data to a grid. You can do that with just a simple SQL query using the ST_SnapToGrid method available in CARTO. You can see that we are re-projecting the data to an Albers Equal Area projection, centered on the US, all in the same query. Isn’t that amazing?

cartodb_id, percent_household_income_spent_on_rent, median_rent,
ST_Transform(ST_SnapToGrid(the_geom, 0.5,0), 5070)
AS the_geom_webmercator FROM your_table_name ORDER by ST_x(the_geom) DESC

Note that in this case, we are selecting the percent_household_income_spent_on_rent and the median_rent columns since they will be the variables that we will use to change the size and color of the triangles in our CartoCSS.

Add some styling

Second, as you can see below, we use CartoCSS conditional styling for changing the height of the triangles based on the values in median_rent, and changing the color depending on the values of the percent_household_income_spent_on_rent column.

  marker-line-width: 0;
  marker-width: 4;
  marker-allow-overlap: true;
  marker-file: url(;

#your_layer_name [ median_rent <= 1659] {
#your_layer_name [ median_rent <= 868] {
#your_layer_name [ median_rent <= 672] {
   marker-height: 20;
#your_layer_name [ median_rent <= 518] {
   marker-height: 10;
#your_layer_name [ median_rent <= 367] {
   marker-height: 5;

 #your_layer_name [ percent_household_income_spent_on_rent <= 50] {marker-fill: #751b4f;}
 #your_layer_name [ percent_household_income_spent_on_rent <= 36.7] {marker-fill: #b7187b;}
 #your_layer_name [ percent_household_income_spent_on_rent <= 31.2] {marker-fill: #e05966;}
 #your_layer_name [ percent_household_income_spent_on_rent <= 25.6] {marker-fill: #f9952d;}
 #your_layer_name [ percent_household_income_spent_on_rent <= 20] {marker-fill:  #FFDAA7;}

And that should be all! Create your “Data Mountain Map” and let us know how it looks. We would love to see what some of the best uses of this type of visualization are.

Happy (Infographic) Mapping!

About the author
Sergio Álvarez

Sergio has spent years bridging the designer-developer divide and making products to improve the way that decisions are made. He has a background in computer science and currently researches data visualization, information design, and interface design with a special focus on data interaction.
In 2009, Sergio co-founded Vizzuality, a company dedicated to visualization, analysis, and cloud-based services for large amounts of data, with offices in Madrid and New York.

More posts from Sergio Álvarez

Related Posts

Ready to optimize your territories with Location Intelligence?

Close circle icon

Contact us

Please fill out the below form and we'll be in touch real soon.