Azavea Atlas

Maps, geography and the web

Let’s Connect at NACIS!


The NACIS Annual Meeting will be held this week in Minneapolis (Oct 14-17, 2015). This conference, presented by the North American Cartographic Information Society, is traditionally an academic focused conference with a great lineup of technical and methodological talks on mapping and cartography. Last year was the first year I attended and I found the presentations to be very engaging and innovative.  One such presentation was Matthew Hampton’s: Bringing Historic Maps to Life at Practical Cartography Day of NACIS 2014 which included his animation of Thaddeus Fowler’s map of Pittsburgh, below.     

Animated map of Pittsburgh created for "Bringing Historic Maps to Life" presentation at NACIS 2014

Animated map of Pittsburgh created for “Bringing Historic Maps to Life” presentation at NACIS 2014

You can also read some of our blog posts that were inspired by last year’s conference: For the Love of Maps, 4 Color Tips Hue Should Know, Teaching a New Map Old Tricks: Using Archival Color.  

Azavea’s Data Analytics team will be attending this year and there are many presentations we are looking forward to. The Practical Cartography Day features an entire day of technically fueled talks on cutting edge cartography. Other noteworthy talks include: Rethinking Web Cartography, Community Mapping and Advanced Map Production.  I’ll be speaking on the How to Hire or Be Hired: A Careers Panel as well. And former Azavean Dana Bauer will be hosting a Gunpowder Mapping workshop. You can check out the entire agenda on the NACIS Sched site. 

While you’re at the conference, don’t forget to pick up the 2015 Atlas of Design or considering ordering it online. This book, published by NACIS, is a great catalog of the year’s most beautiful and creative cartography.

Flipping through Atlas of Design Cartography book

Image of Atlas of Design 2014 (Image credit: NACIS Atlas of Design)

If you are attending this conference, feel free to get in touch and meet the Data Analytics team!  If you are not attending it this year, check out the schedule and consider attending in the future!

Preparing Geographic Data for Your Next Design Project in Illustrator

Etsy features numerous vendors selling map inspired pieces including wall hangings, greeting cards, screen prints and pillow cases. For artists that would like to use geographic or spatial data such as streets or neighborhoods as part of their artwork, they could trace this data by hand from Google maps or an atlas, but there’s a much easier way: converting spatial data to SVG format so it can be used in Illustrator, GIMP or other vector image processing tool.  This guide presents the steps to convert a GIS shapefile of streets or roads into an SVG file that can be viewed and manipulated in Adobe Illustrator or similar program.  We’ll use a file containing the streets of Philadelphia as the source data but these steps could also be applied to boundary files such as neighborhoods or states.

What is a Shapefile?

Before we discuss the conversion, it’s important to understand the source data. A shapefile is the most common data format in which you will find geographic or spatial data such as streets.  Shapefiles are a vector data format for storing geographic data including the data’s location, shape and attributes of the geographic features. It is stored as a set of related files which are displayed and manipulated as a single spatial layer in a desktop or web GIS program. Each file has a different function including defining the geographic features, the supporting attribute data, the metadata and the projection and coordinate information.

When you look at one shapefile in windows explorer it looks like this:

Shapefile in Windows Explorer
Download OpenStreetMap Shapefile Data

First, we need to get our hands on a shapefile.  For this example, we’ll use a shapefile of OpenStreetMap data.  OpenStreetMap is free international-scale geographic data contributed by volunteers. (Note: when using OpenStreetMap data for your project, be sure to read and understand the copyright agreement and required citations.)

Visit the Mapzen OSM Extract Tool to download OpenStreetMap data in shapefile format. For example, search for Philadelphia and click the download option titled IMPOSM SHP.  Unzip that folder to a local workspace. You will see several sets of shapefiles – each shapefile is a series of multiple files with the same name but different file extensions. For this project, the only shapefile of interest is roads:  philadelphia_pennsylvania_osm_roads.

Extracted OSM Data in Browser

 Download Other Shapefile Data

If the Mapzen Extract Tool does not have the geographic region or dataset that you need, you can also search the web for shapefiles to download.  To do this use a search term that includes [City] [Dataset] [Data Format].  So try “Philadelphia Streets Shapefile Download” or you can search for other data such as Neighborhoods: “Boston Neighborhoods Shapefile Download”.  Download the zipped shapefiles and extract to your working folder.  Additionally, many cities have open data portals which offer free geographic data in shapefile format. Just like OpenStreetMap Data, be sure to read the use limitations of the geographic data to determine that you do not violate any of these restrictions.

Add Shapefile to the Web Mapping Tool

IndieMapper is a free online tool that can be used to quickly explore and export shapefile data in various formats.  When you first visit the site, the application will launch in the browser and you will be prompted to add data.

Indie Mapper Upload Screen 1

Select the Browse for KML/SHP/GPX button. Navigate to where you extracted your shapefile data. For the OpenStreetMap Roads data, you’ll select the philadelphia_pennsylvania_osm_roads.shp file and select Open.  (Note: you can also upload KML and GPX data to this application.) Next, Select Skip DBF.

Indie Mapper Upload Screen

The shapefile will now be loaded into the browser.  Use the magnify tool to zoom to the area of the shapefile you are interested in.

Indie Mapper Resize Screen

Export the Shape to SVG

Select the Export button in the upper right hand corner.

Specify the page size and name of your SVG file.

Indie Mapper Generate SVG File

Select Generate File.  After the file is generated, select Export to your Computer. Identify the location where you’d like this to be exported.

The file can now be added to a vector image editing program such as Adobe Illustrator or GIMP.  I hope you find these tips helpful the next time you need to extract geographic data for your map inspired art project!

Displaying Hierarchical Geographic Data with a D3 Tree, or How to Fit 23 Maps of Philadelphia on One “Page”

Summer of Maps logo

Now in its fourth year, Azavea’s Summer of Maps Program has become an important resource for non-profits and student GIS analysts alike.  Non-profits receive pro bono spatial analysis work that can enhance their organizational decision-making processes and programmatic activities, while students benefit from Azavea mentors’ expertise.   This year, three fellows worked on projects for six organizations that spanned a variety of topics and geographic regions.  This blog series documents some of their accomplishments and challenges during their fellowship.  Our 2015 sponsors Esri, Temple University Geography and Urban Professional Masters Studies Program and Betsy and Jesse Fink helped make this program possible.  For more information about the program, please visit the Summer of Maps website.

While working with the African Family Health Organization, an organization that provides health and human services for African immigrants in Philadelphia, I realized they had a substantial need to understand the distribution of African-born populations throughout the City.  

But before visualizing this data, it’s important to consider the data at hand. Geographic data often has a hierarchical structure. Total populations can be split into smaller subsets, like individuals that are: employed, unemployed or out of the labor force. Geographic boundaries themselves also usually have a hierarchy. (For instance, in the US, Census Data is commonly reported as counties, tracts, block groups and blocks, each smaller than the last. A visualization technique called small multiples can be useful for showing how these subsets stack up by displaying a grid of maps with related data for easy comparison. But what if you want to emphasize the specifically hierarchical nature of the data? Or what if the small multiples are just too small?  Using the D3 JavaScript library you can make a data visualization that turns your series of maps into a collapsible, zoomable, draggable tree. Clicking one map opens a branch showing the next layer of sub-maps. I made this tool to display data from the American Community Survey on the African-born population in Philadelphia, but it is widely applicable to many types of hierarchical data. Take a look at this repository for all the code, and this site for a full-size version.


At its core, this visualization is just a modified version of the D3 tree structure. Start from a simple tree like this:

tree of data relationship


If you want your map tree to be vertical, switch all of the x coordinates to y’s and vice versa.

Next, replace the circular nodes with images of your maps. Before starting this step, produce all of the maps you want to include in the tree using your favorite GIS software. Make sure that they all have the same dimensions, and export them as PNG or JPG. Upload them to your preferred image hosting platform. I also chose to add the label text into the image files because it removed the hassle of positioning all of the text through JavaScript.

Add the image URLs as icon fields in your JSON data, as shown in this example. At minimum your JSON data should contain the name, parent, and icon fields:

"name": "Son of B",
"parent": "Level 2: B",
"icon": ""

Replace the nodeEnter.append(“circle”) section of the code, which draws the circles on the tree, with a reference to your images, as follows:

    .attr("xlink:href", function(d) { return d.icon; })
    .attr("x", "0px")
    .attr("y", "0px")
    .attr("width", "210px")
    .attr("height", "230px");

At this point your images will probably be overlapping each other or too small. You will need to tweak the size and position them as you want, but save this until you’ve made the tree interactive and can see their positions when branches are opened and closed. You may also remove any sections of the code referring to links if you don’t want the paths between images to display.

The final step is to make your tree interactive.Put all of the tree-drawing components into an update function, and make a couple of modifications as this example illustrates. You’ll enter the nodes at their parent’s initial positions, source.x0 and source.y0. Then you’ll use nodeUpdate to transition them to their new positions, d.x and d.y. Finally you’ll use nodeExit to transition the exiting nodes to their parent’s final positions, source.x and source.y. To make all of this work, add a click function that toggles the clicked node’s children and then calls update, and add the event handler that calls the click function, .on(“click”, click), to the nodes. If you want the tree to start collapsed in a collapsed state , it’s easiest to modify your JSON data by putting an underscore in front of each of the nodes that you want to initialize undisplayed.

Zoom is achieved by adding the following simple zoom function:

function zoomed() { 
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")

and a zoom event handler. Since you want to be able to zoom and drag from anywhere on the canvas, not just when you hover over the images, you can add a transparent rectangle to your SVG canvas on which you call the zoom listener, but the zoom function itself acts on the group containing the tree.

One final useful trick is necessary to prevent the tree from expanding or collapsing every time you drag by grabbing a map. This will stop the maps from toggling when the click event is suppressed during a dragging action.  In the click function, add

if (d3.event.defaultPrevented) return;

And that’s it! You now have an interactive tool for exploring hierarchical data! You can add whatever text, menus, legends, etc to your svg canvas that you’d care to. This particular visualization will allow the African Family Health Organization to explore at a glance where subsets of the African immigrant population live. The next time you are trying to visualize a similar type of nested data, give this technique a try!

Tool Tips for CartoDB Torque

Summer of Maps logo

Now in its fourth year, Azavea’s Summer of Maps Program has become an important resource for non-profits and student GIS analysts alike.  Non-profits receive pro bono spatial analysis work that can enhance their organizational decision-making processes and programmatic activities, while students benefit from Azavea mentors’ expertise.   This year, three fellows worked on projects for six organizations that spanned a variety of topics and geographic regions.  This blog series documents some of their accomplishments and challenges during their fellowship.  Our 2015 sponsors Esri, Temple University Geography and Urban Professional Masters Studies Program and Betsy and Jesse Fink helped make this program possible.  For more information about the program, please visit the Summer of Maps website.

Every single map you will ever come across has at least one thing in common, they all show at least 2 dimensions, the X and the Y, the latitude and the longitude, the length and the width. But there is a third dimension that can be just as crucial in getting your message across and no, it’s not depth. It’s time.

Temporal data can be expressed with any unit of time that is associated with the events in your data, whether it be hours in a day, days in a week, weeks in a month, years or anything in between. Having a temporal element in your data adds an entirely new dimension and allows you to see patterns that might otherwise be hidden if the data was static. For example,Tyler Dahlberg, a 2013 Summer of Maps fellow and current Data Analytics team member, uncovered the seasonality of bike thefts using time series analysis for his project with the Greater Philadelphia Bicycle Coalition.  Before the advent of online mapping technologies and powerful APIs, showing temporal data on maps was limited to either color coding different features or by creating multiple iterations of the same map that each show the data as a series of snapshots in time.

But never fear! This is the future and in the future the web mapping gurus at CartoDB have created an easy to use tool called Torque, a library designed to allow you to display temporal data points to your web map.

Types of Data to show on a Torque Map

  • Growth of an event or program
  • Events that vary at different times of day
  • Events that vary by season/time of year
  • Frequency of clustering of certain events

This Summer, I made a Torque map for the Pennsylvania Horticultural Society showing the growth of their vacant lot cleaning program.While the torque function wizard is very easy to use, I am going to go show you a few tips and tricks to tweak the styling and functionality of your torque map using CartoDB’s built in CSS window.

1. Format Dataset

In order to use the torque function, your dataset needs a field that contains a dates in mm/dd/yyyy format. This must be a point dataset, as Torque cannot display temporal elements in polygon or line data at this time. After uploading the data, set your time column to the “date” data type and CartoDB will convert it to a readable format. You may also consider removing any outlying dates that could cause a large gap in the animation.


Data in Cartodb date format

2. Select Torque option from visualization wizard

Torque wizard

CartoDB visualization selector

3. Set Time Column to the field which contains the temporal data

Time column selector in torque

Time column selector

4. Select Cumulative

Having accumulating points is great for showing showing the growth of a program or event. With this option turned off, the points only appear during the period of time currently displayed.

5. Point Symbols

I chose the rectangle shape because it symbolizes land parcels in this case, which are often square.

6. Set Number of Steps

The steps are the number of different time frames the animation cycles through from start to finish. Set it according to the range of different dates in your dataset. This must be set to 64, 128, 256, 512, or 1028.

7. Customize CSS

With some of the standard options set, click on the CSS tab on the sidebar to further customize the Torque map. The default option is to have three [frame-offset]’s, which create larger point symbols beneath the initial point to create and effect that the point is growing. When working with large datasets however, this effect can be cluttering and take up too much space on your map. I deleted the third frame offset and changed the marker-widths from 4 and 6 to 2 and 4. This allows my points to still have the effect that they are growing without consuming more space. When using offset frames, set the marker-line-width to 0 or else the border of the multiple marker symbols will overlap and distort the color.

You can also take this time to set the torque-animation-duration which, similarly to the number of steps, should be set according to the number of data points and the range of dates. Unlike the number of steps however, the duration can be any positive number.

Finally, I deleted the blend mode option from the CSS. The blend option can either lighten or darken overlapping points and frame offsets, however by doing so, it can distort your color scheme and sometimes be visually misleading.

/** torque visualization */

Map {









 marker-fill-opacity: 0.9;

 marker-line-width: 0;

 marker-type: rectangle;

 marker-width: 2;

 marker-fill: #81bd41;


#phs_maintainance_points_2000[frame-offset=1] {




#phs_maintainance_points_2000[frame-offset=2] {




You can explore the final map below: Growth of Philadelphia LandCare Torque Map.


Free Cicero Credits During #Dreamforce!

In honor of Dreamforce 2015, Cicero is granting twice the free API credits to all who sign up between September 15th and 22nd. The Cicero API matches addresses to legislative districts, and returns comprehensive elected official information, including district offices and social media identifiers. As a developer, use the API  to fuel the next great Salesforce App! Not a developer? Cicero is already integrated with the Nonprofit Starter Pack, for easily matching your household addresses to legislative districts. 

During Dreamforce, we want to encourage everyone to test out Cicero with 2,000 free credits! To sign up, simply visit our free trial page. You will instantly get 1,000 credits, which is good for 90 days. As a tribute to Dreamforce, we’ll add 1,000 more, and extend your trial an additional 3 months. That’s 2,000 credits in total, good for 6 months (trust us, we did the math).

Have questions? Drop us a line or tweet us; we’ll be happy to help. Happy Dreamforce!


cicero hearts Salesforce