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: https://github.com/CartoDB/cartodb-publishing-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:
Spanish-provinces-shp.zip (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: http://developers.cartodb.com/tutorials/merging_data.html.
More info:
- [CartoDB tour](http://cartodb.com/tour) - [Getting started with CartoDB](http://developers.cartodb.com/documentation/using-cartodb.html) - [CartoCSS reference](http://mapbox.com/carto/api/2.1.0/) - [Join two tables using SQL](http://developers.cartodb.com/tutorials/joining_data.html)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.
Click on "map view", choose any base map and make a choropleth map throug the "visualization wizard" menu.
The map is ready. Using the "share" menu, share or embedded the final map.
We'll use a zip file named "markets.zip" (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
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.
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: https://gist.github.com/cmdelaserna/1b44e2be33b176422d20
Map: http://cdb.io/Wza1lw
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:
building-height:[height]
CartoCSS to create an intensity map out the data on markets in Madrid:
CartoCSS: https://gist.github.com/cmdelaserna/4726629
Map: http://cdb.io/VGx3Ko
http://www.slideshare.net/andrewxhill/using-cartodb-to-analyze-openstreetmap-data