Lately, there has been a lot happening at CartoDB 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 CartoDB. 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?
SELECTcartodb_id,percent_household_income_spent_on_rent,median_rent,ST_Transform(ST_SnapToGrid(the_geom,0.5,0),5070)ASthe_geom_webmercatorFROMyour_table_nameORDERbyST_x(the_geom)DESCNote 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.
#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;}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!