By Claudia Nuñez, Migrahack Special for the 2013 Specialized Reporting Institute on immigration reform. http://immigrationreportingworkshop2013.borderzine.com/

1. Claudia Núñez
Migrahack
nunezcla99@gmail.com
@nunezcla

2. Tutorial Mapping Data
Planning your visualization
•Identify your data and key message (geographic and descriptive information)
•Choose the data series to illustrate and join in your map
•Consider the different mapping software available for free
QGIS, ArcGis, FusionTables, CartoDb, TileMill
•Identify the mapping style
- Chloropleth: Colors correspond to numeric values for each variable.
- Geomaps: Colors and values assigned to specific regions
- Point: Locations/geocoded markers.
•Think about complementary elements (video, audio, technology, etc.)
Next steps: Creating your own Map: Spatial and Statistical Analysis

3. Step 1. Install and set up your tools
•QGIS is a Free computer-based program that links geographic information (where things are) with descriptive
information (what things are)
•In this tutorial, we are going to work with TileMill, a desktop map building tool that helps you to rapidly design
completely custom maps and allows you to take data layers and blend them onto a single map and create beautiful
designs with little programming. (http://www.mapbox.com/tilemill/)
•Excel, Google spreadsheet, Open Office…

4. Step 2. Locate and prepare your data attribute table as a comma separated value (.csv)
or dbase form (.dbf)
Data surce:
http://www.immigrationpolicy.org/sites/default/files/docs/who_and_where_the_dreamers_are_0.pdf
Dreamers .xls file:
https://skydrive.live.com/redir?page=view&resid=6ED83A615217D1A4!165&authkey=!AHATkCR4prdJIAw
Dreamers .dbj File:
https://skydrive.live.com/?cid=6ed83a615217d1a4&id=6ED83A615217D1A4%21167&action=Share
Shape Files for this tutorial:
http://www.census.gov/geo/maps-data/data/tiger-line.html
TileMill Map Style
https://docs.google.com/document/d/1-xeaUXKQKIioyE2DGA_--yCKHy7KtTsuq6tdifAf2nk/edit?usp=sharing
•Main points to remember are to delete all the unnecessary columns from the spreadsheet, sort your data alphabetically
or in numeric order and leave the geographic information on the first column.
•Locate and download your geocoded data or the corresponding geometric polygons. You can use the shape files from the
Census Bureau. (http://www.census.gov/geo/maps-data/)

5. Step 3. Join your data
This process allows you to connect a non-spatial table to a layer attribute table. It is very important to remember that in
order to join two different tables you must have a common attribute, in this case we will join the numeric code information.
•Open Qgis
•Select the “Add Vector Layer” option
•Locate the .shp file that you downloaded earlier.
•Open it and you will see your map.
•To speed up our workshop, for this tutorial we are not going to work with Alaska, American Samoa, Commonwealth
Mariana Islands, Guam, Hawaii, Puerto Rico and United States Virgin Islands.
•Right click on your file, click on “Toggle Editing” and click on “Attribute table”, select the regions and delete the information
that you will not use.
•Now format your data by selecting just the information that you will need. Click on “Add Vector Layer”, click on “Table
Manager” and delete all the unnecessary columns. In this example we only want to keep the numeric code.
•Lets add our information to the map: Add a new layer (just like you did before)
•Locate your .csv or .dbf file and open it into QGis
•Select the shape file layer and go to “Properties”, then “join.” Add (+) new vector and join it to the common layer
•To view the shape file attributes right click on the layer and select the option, “open attribute table” and review your
information.

6. Step 4. Export your map
Export your new shapefile by control-clicking the shapefile layer, selecting “Save as,” and saving the layer as
ESRI Shapefile format, WN84.
This process will generate a series of files that you will need to compress as a .zip package
And DONE, your new shape file is ready for you to style it.

7. TILEMILL
Step 1. Install Tilemill
Open Tilemill
Step 2. Set up a new project
Click on the “new project” button to bring in your newly created map (from the previous steps) and name your project.
Open your project and click on the icon for LAYERS:
Step 3. Style your data
Map styling happens by attaching CartoCSS stylesheets to the map project. The syntax for CartoCSS is made up of:
•Selection of layers
•Colors
•Transparency
•Size of features
•SVG icons
•Lettering style and positioning
•Scales at which features appear

8. @serif:"Times New Roman Regular","FreeSerif Medium","DejaVu Serif
Book";
Map {
background-color: #fff;
}
#country {
line-color: #fff;
line-width:0.5;
polygon-fill:#fff;
polygon-comp-op: overlay;
comp-op: screen;
line-join: round;
}
#mapadreamfi {
line-color:#0c3602;
line-width:0.5;
polygon-opacity:1;
polygon-fill:#5cd221;
line-join: round;
raster-scaling:lanczos
}
#mapadreamfi[zoom>2][zoom<6]{
text-name: "[STATE]";
text-face-name: @serif;
text-size:6;
text-placement-type: simple;
text-placements: "N,S,E,W,NE,SE,NW,SW,6,8,10";
text-dy: 3;
text-dx: 3;
}
#mapadreamfi[ALL_POTENT<=550000] {
polygon-fill:#6e0909
}
#mapadreamfi[ALL_POTENT<=300000] {
polygon-fill:#b94f4f
}
#mapadreamfi[ALL_POTENT<=150000] {
polygon-fill:#da6247
}
#mapadreamfi[ALL_POTENT<=75000] {
polygon-fill:#f3a680
}
#mapadreamfi[ALL_POTENT<=10000] {
polygon-fill:#fce3d0
}
#mapadreamfi[ALL_POTENT< 110] {
polygon-fill:#f9f5f3
}
For this project, I’ve created a stylesheet
, but you should check out your own
options with Tilemill.
Copy, paste on the Style.mss
and check out your map
By the time you’re done, your map
should look something like this.
Try ColorBrewer or 0to255
for color ramps for your data.

9. Step 4. Navigate to the Templates panel. Select “Teaser.” This is the field that defines what appears in the tooltip
that appears when the user moves the mouse over each polygon.
Basically, all you have to do is format the field to correspond to the values in your data. Copy and paste this code:
<b>{{{STATE}}}</b>
<div><b>WHO AND WHERE THE DREAMERS ARE:</b></div>
<hr><div>Total Potential Dreamers Beneficiaria 2012</div>
{{{ALL_POTENT}}}</div>
<br><div>Female:
{{{FEMALE}}}</div>
<div>Male:
{{{MALE}}}</div>

10. <div class='legend-title'><b>WHO AND WHERE THE DREAMERS ARE</b></div>
<div>Potential Dreamers Beneficiaria 2012</div>
<hr>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#6e0909;'></span>More than 550000</li>
<li><span style='background:#b94f4f;'></span>More than 300000</li>
<li><span style='background:#da6247;'></span>More than 150000</li>
<li><span style='background:#f3a680;'></span>More than 75000</li>
<li><span style='background:#fce3d0;'></span>More than 10000</li>
<li><span style='background:#f9f5f3;'></span>Less than 110 </li>
</ul>
</div>
<div class="legend-source"> <b>Source:<b> <a
href="http://www.immigrationpolicy.org/sites/default/files/docs/who_and_where_the_dreamers_are_0.pdf"><b>Immigration Policy Center<b>
</a></div>
</div>
<style type='text/css'>
.wax-legend .legend-title {
text-align: left;
margin-bottom: 10px;
font-weight: bold;
font-size: 100%;
}
.wax-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.wax-legend .legend-scale ul li {
font-size: 80%;
list-style: none;
margin-left: 0;
text-align: center;
line-height: 18px;
margin-bottom: 2px;
}
.wax-legend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 25px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.wax-legend .legend-source {
font-size: 70%;
color: #999;
clear: both;
}
.wax-legend a {
color: #777;
}
.wax-tooltip {
width: 500px;
opacity: 1;
margin-bottom: 12px;
</style>
Step 5. Add a custom legend to the map.
Select “Legend” and with basic HTML/CSS you can
outline the structure and style of your legend.
Copy and paste this format to your map:

11. Step 6. Get your map on the Web.
On the top right of Tilemill, select “Export” and choose “MBTiles.” so you can host the map on
MapBox and get the link to share.
•Set the center point
•Set the bounds
•Give the map a name
•Type a brief description
•Attribute the data source.
Click “Export” and save your map in the directory of your choice.
The .MBTiles file will be hosted on MapBox, where you can get the embedded link and post it in
your blog or media outlet page, also MapBox gives you the option of sharing through social
media

12. Next Step
Practice, practice,
practice!
Here is a list of powerful and easy
tools to translate your spreadsheets
into a map that you can publish on
your website.
•Migrahack Begginers Fusion Tables Tutorial
•BatchGeo
•Tableau Public
•CartoDB
•Open Heat Map
•Ushahidi
•Leaflet
•Open Street Map
•Many Eyes (IBM)
You did it!