Claudia NúñezMigrahacknunezcla99@gmail.com@nunezcla

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 freeQGIS, 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

 

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…

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 Stylehttps://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/)

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.

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.

TILEMILLStep 1. Install Tilemill

Open Tilemill

Step 2. Set up a new projectClick 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 dataMap 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

@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.mssand 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.

Tilemill,

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>

<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:

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

Next StepPractice, 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!