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.

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.

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?

##_INIT_REPLACE_ME_PRE_##

SELECT
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
##_END_REPLACE_ME_PRE_## 

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.

##_INIT_REPLACE_ME_PRE_##

your_layer_name{

marker-line-width: 0; marker-width: 4; marker-allow-overlap: true; [zoom<=4]{marker-width:2.5;} marker-file: url(http://com.cartodb.users-assets.production.s3.amazonaws.com/maki-icons/triangle-18.svg); }

your_layer_name [ median_rent <= 1659] {

marker-height:80; [zoom<=4]{marker-height:40;} [zoom="">=6]{marker-height:160;} [zoom>=7]{marker-height:320;} }

your_layer_name [ median_rent <= 868] {

marker-height:40; [zoom<=4]{marker-height:20;} [zoom="">=6]{marker-height:80;} [zoom>=7]{marker-height:160;} }

your_layer_name [ median_rent <= 672] {

marker-height: 20; [zoom<=4]{marker-height:10;} [zoom="">=6]{marker-height:40;} [zoom>=7]{marker-height:80;} }

your_layer_name [ median_rent <= 518] {

marker-height: 10; [zoom<=4]{marker-height:5;} [zoom="">=6]{marker-height:20;} [zoom>=7]{marker-height:40;} }

your_layer_name [ median_rent <= 367] {

marker-height: 5; [zoom<=4]{marker-height:2.5;} [zoom="">=6]{marker-height:5;} [zoom>=7]{marker-height:10;} }

#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;} ##_END_REPLACE_ME_PRE_##

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!