Workshop: mapping & journalism
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Making maps with CartoDB

- Outline for a Workshop & mapping class-

Links and resources collected for the workshop on mapmaking with CartoDB as a tool for journalism, held at the MediaLab Prado Data Journalism group (feb. 2013), and the mapping class from the '13 IE Business School Master on Digital Journalism.

Full download includes all data files and a responsive CartoDBjs template made by @saleiva.

More CartoDB templates:

Note: Since version 2.1, CartoDB adds multilayer support and some new features not included in this tutorial. Check this link for a full description.


The workshop is planned as an introduction to data journalism with maps. First, it is shown how to upload and combine data into CartoDB to elaborate a map of unemployment in Spain.

- Spanish provinces data: (data folder)/

- Unemployment data (Q4 2012, INE):

Unemployment-spain.csv (data folder)

First file has all geographic information needed. It is a compressed shapefile. Drag and drop the .zip file data into CartoDB to upload the data. The unemployment data is a .csv file. Drag & drop it too.

We need to merge both files (shapefile + data) to build a choropleth map. Here there is a full tutorial on using the merge tables function available at CartoDB:

Alt text

More info:

- [CartoDB tour]( - [Getting started with CartoDB]( - [CartoCSS reference]( - [Join two tables using SQL](


The unemployment rate is in a column called "paro_2012iv". We need to transform it from "string" to "number" to be able to use it for encoding numeric information.

Alt text

Click on "map view", choose any base map and make a choropleth map throug the "visualization wizard" menu.

Alt text

The map is ready. Using the "share" menu, share or embedded the final map.

Advanced styling

We'll use a zip file named "" (data folder). Drag and drop it into your CartoDB dashboard.

It includes data (shapefile) from three files on markets in Madrid. I ran the the following SQL query to join them:

SELECT 'abastos' as new_table, the_geom, denominaci, direccion FROM abastos
UNION SELECT 'galerias' as new_table, the_geom, direccion, nombre from galimenta
UNION SELECT 'hipermercados' as new_table, the_geom, direccion, eti FROM hipermercados

Add an image to the infowindow

Create a new column and paste the url where the image is hosted. In the "infowindown" menu (map view), choose a style for the header and drag the url column to the first position.

Alt text

Editing CartoCSS

We need to edit manually the style of the map to be able to create a color code for each type of market: "abastos", "galerías", "hipermercados".

CartoCSS Code:


Create a 3D Polygon

You can create a polygon, a point or a line clicking on the "add feature" function (map view). To specify the height of a polygon and create some-kind of a 3D building, click on the table view, add a "height" column, and specify the value. Then, add just a line to the CartoCSS code:


![Alt text](img/6.png "building-height cartocss")

Create an intensity map

CartoCSS to create an intensity map out the data on markets in Madrid:



![Alt text](img/5.png "intensity map")

Import OpenStreetMap data