{"id":424,"date":"2014-01-06T21:36:30","date_gmt":"2014-01-07T02:36:30","guid":{"rendered":"http:\/\/homepages.uc.edu\/~yaozo\/wordpress\/?p=424"},"modified":"2014-01-06T21:36:30","modified_gmt":"2014-01-07T02:36:30","slug":"how-to-make-a-us-county-thematic-map-using-free-tools","status":"publish","type":"post","link":"https:\/\/zhuoyao.net\/index.php\/2014\/01\/06\/how-to-make-a-us-county-thematic-map-using-free-tools\/","title":{"rendered":"How to Make a US County Thematic Map Using Free Tools"},"content":{"rendered":"
\n
By\u00a0NATHAN YAU<\/div>\n
\n

\"Unemployment<\/p>\n

There are about a million ways to make a choropleth map. The problem is that a lot of solutions require expensive software or have a high learning curve. It doesn’t have to be that way.<\/div>\n
\n
Demo<\/a><\/div>\n
Download Source<\/a><\/div>\n
<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
\n

What if you just want a simple map without all the GIS stuff? In this post, I’ll show you how to make a county-specific choropleth map using only free tools.<\/p>\n

Here’s\u00a0what we’re after<\/a>. It’s an\u00a0unemployment map<\/a>\u00a0from 2009.<\/p>\n

Step 0. System requirements<\/h3>\n

This tutorial was written with Python 2.5 and Beautiful Soup 3. If you’re using a more recent version of either, you might have to modify the code. See comments below for tips.Just as a heads up, you’ll need\u00a0Python<\/a>\u00a0installed on your computer. Python comes pre-installed on the Mac. I’m not sure about Windows. If you’re on Linux, well, I’m sure you’re a big enough nerd to already be fluent in Python.<\/p>\n

We’re going to make good use of the Python library\u00a0Beautiful Soup<\/a>, so you’ll need that too. It’s a super easy, super useful HTML\/XML parser that you should come to know and love.<\/p>\n

Step 1. Prepare county-specific data<\/h3>\n

The first step of every visualization is to get the data. You can’t do anything without it. In this example we’re going to use county-level unemployment data from the Bureau of Labor Statistics. However, you have to go through FTP to get the most recent numbers, so to save some time,\u00a0download the comma-separated (CSV) file here<\/a>.<\/p>\n

It was originally an Excel file. All I did was remove the headers and save as a CSV.<\/p>\n

Step 2. Get the blank map<\/h3>\n

Luckily, we don’t have to start from scratch. We can get a blank\u00a0USA counties map<\/a>\u00a0from Wikimedia Commons. The page links to the map in four sizes in PNG format and then one as SVG (USA_Counties_with_FIPS_and_names.svg\u00e2\u20ac\u017d<\/code>). We want the SVG one. Download the SVG file onto your computer and save it as\u00a0counties.svg<\/code>.<\/p>\n

Blank US counties map in SVG format\"usa-counties\"<\/a><\/p>\n

The important thing here, if you’re not familiar with SVG (which stands for scalable vector graphics), is that it’s actually an XML file. It’s text with tags, and you can edit it in a text editor like you would a HTML file. The browser or image viewer reads the XML. The XML tells the browser what to show.<\/p>\n

Anyways, we’ve downloaded our SVG map. Let’s move on to the next step.<\/p>\n

Step 3. Open the SVG file in a text editor<\/h3>\n

I want to make sure we’re clear on what we’re editing. Like I said in Step 2, our SVG map is simply an XML file. We’re not doing any photoshop or image-editing. We’re editing an XML file. Open up the SVG file in a text editor so that we can see what we’re dealing with.<\/p>\n

You should see\u00a0something like this<\/a>:<\/p>\n

SVG is just XML that you can change in a text editor.\"svg-shot-top\"<\/p>\n

We don’t care so much about the beginning of the SVG file, other than the\u00a0width<\/code>\u00a0andheight<\/code>\u00a0variables, but we’ll get back to that later.<\/p>\n

Scroll down some more, and we’ll get into the\u00a0meat of the map<\/a>:<\/p>\n

The\u00a0path<\/code>\u00a0tags contain the geographies of each county.\"svg-shot-middle\"<\/a><\/p>\n

Each\u00a0path<\/code>\u00a0is a county. The long run of numbers are the coordinates for the county’s boundary lines. We’re not going to fuss with those numbers.<\/p>\n

We only care about the beginning and very end of the\u00a0path<\/code>\u00a0tag. We’re going to change thestyle<\/code>\u00a0attribute, namely\u00a0fill<\/code>\u00a0color. We want the darkness of\u00a0fill<\/code>\u00a0to correspond to the unemployment rate in each given county.<\/p>\n

We could change each one manually, but there are over 3,000 counties. That would take too long. Instead we’ll use Beautiful Soup, an XML parsing Python library, to change colors accordingly.<\/p>\n

Each\u00a0path<\/code>\u00a0also has an\u00a0id<\/code>, which is actually something called a\u00a0FIPS code<\/a>. FIPS stands for Federal Information Processing Standard. Every county has a unique FIPS code, and it’s how we are going to associate each path with our unemployment data.<\/p>\n

Step 4. Create Python script<\/h3>\n

Open a blank file in the same directory as the SVG map and unemployment data. Save it ascolor_map.py<\/strong>.<\/p>\n

Step 5. Import necessary modules<\/h3>\n

Our script is going to do a few things. The first is read in our CSV file of unemployment data. So we’ll import the\u00a0csv<\/code>\u00a0module in Python. We’re also going to use Beautiful Soup later, so let’s import that too.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\nimport<\/code>\u00a0csv<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nfrom<\/code>\u00a0BeautifulSoup\u00a0<\/code>import<\/code>\u00a0BeautifulSoup<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

Step 6. Read in unemployment data with Python<\/h3>\n

Now let’s read in the data.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n# Read in unemployment rates<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nunemployment\u00a0<\/code>=<\/code>\u00a0{}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nreader\u00a0<\/code>=<\/code>\u00a0csv.reader(<\/code>open<\/code>(<\/code>'unemployment09.csv'<\/code>), delimiter<\/code>=<\/code>\",\"<\/code>)<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nfor<\/code>\u00a0row\u00a0<\/code>in<\/code>\u00a0reader:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>try<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>full_fips\u00a0<\/code>=<\/code>\u00a0row[<\/code>1<\/code>]\u00a0<\/code>+<\/code>\u00a0row[<\/code>2<\/code>]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>rate\u00a0<\/code>=<\/code>\u00a0float<\/code>( row[<\/code>8<\/code>].strip() )<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>unemployment[full_fips]\u00a0<\/code>=<\/code>\u00a0rate<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
9<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>except<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>pass<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

We read in the data with\u00a0csv.reader()<\/code>\u00a0and then iterate through each row in the CSV file. The FIPS code is split up in the CSV by state code (second column) and then county code (third column). We put the two together for the full FIPS county code, making a five digit number.<\/p>\n

Rate is the ninth column. We convert it to a\u00a0float<\/code>\u00a0since it’s initially a string when we read it from the CSV.<\/p>\n

The\u00a0rate<\/code>\u00a0is then stored in the\u00a0unemployment<\/code>\u00a0dictionary with the\u00a0full_fips<\/code>\u00a0as key.<\/p>\n

Cool. The data is in. Now let’s load the SVG map, which remember, is an XML file.<\/p>\n

Step 7. Load county map<\/h3>\n

Loading the map is straightforward. It’s just one line of code.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n# Load the SVG map<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nsvg\u00a0<\/code>=<\/code>\u00a0open<\/code>(<\/code>'counties.svg'<\/code>,\u00a0<\/code>'r'<\/code>).read()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

The entire string is stored in\u00a0svg<\/code>.<\/p>\n

Step 8. Parse it with Beautiful Soup<\/h3>\n

Loading\u00a0svg<\/code>\u00a0into Beautiful Soup is also straightforward.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n# Load into Beautiful Soup<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nsoup\u00a0<\/code>=<\/code>\u00a0BeautifulSoup(svg, selfClosingTags<\/code>=<\/code>[<\/code>'defs'<\/code>,<\/code>'sodipodi:namedview'<\/code>])<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

Step 9. Find all the counties in the SVG<\/h3>\n

Beautiful Soup has a nifty\u00a0findAll()<\/code>\u00a0function that we can use to find all the counties in our SVG file.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n# Find counties<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\npaths\u00a0<\/code>=<\/code>\u00a0soup.findAll(<\/code>'path'<\/code>)<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

All paths are stored in the\u00a0paths<\/code>\u00a0array.<\/p>\n

Step 10. Decide what colors to use for map<\/h3>\n

There are plenty of color schemes to choose from, but if you don’t want to think about it, give the\u00a0ColorBrewer<\/a>\u00a0a whirl. It’s a tool to help you decide your colors. For this particular map, I chose the PurpleRed scheme with six data classes.<\/p>\n

ColorBrewer interface for easy, straightforward way to pick colors\"colorbrewer\"<\/p>\n

In the bottom, left-hand corner, are our color codes. Select the hexadecimal option (HEX), and then create an array of those hexadecimal colors.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n# Map colors<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\ncolors\u00a0<\/code>=<\/code>\u00a0[<\/code>\"#F1EEF6\"<\/code>,\u00a0<\/code>\"#D4B9DA\"<\/code>,\u00a0<\/code>\"#C994C7\"<\/code>,\u00a0<\/code>\"#DF65B0\"<\/code>,\u00a0<\/code>\"#DD1C77\"<\/code>,<\/code>\"#980043\"<\/code>]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

Step 11. Prepare style for paths<\/h3>\n

We’re getting close to the climax. Like I said earlier, we’re going to change the\u00a0style<\/code>attribute for each path in the SVG. We’re just interested in fill color, but to make things easier we’re going to replace the entire\u00a0style<\/code>\u00a0instead of parsing to replace only the color.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n# County style<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n'font<\/code>-<\/code>size:<\/code>12px<\/code>;fill<\/code>-<\/code>rule:nonzero;stroke:<\/code>#FFFFFF;stroke-opacity:1;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nstroke<\/code>-<\/code>width:<\/code>0.1<\/code>;stroke<\/code>-<\/code>miterlimit:<\/code>4<\/code>;stroke<\/code>-<\/code>dasharray:none;stroke<\/code>-<\/code>linecap:butt;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nmarker<\/code>-<\/code>start:none;stroke<\/code>-<\/code>linejoin:bevel;fill:'<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

Everything is the same as the previous style except we moved\u00a0fill<\/code>\u00a0to the end and left the value blank. We’re going to fill that in just a second. We also changed\u00a0stroke<\/code>\u00a0to\u00a0#FFFFFF<\/code>\u00a0to make county borders white. We didn’t have to leave that value blank, because we want all borders to be white while\u00a0fill<\/code>\u00a0depends on unemployment rate.<\/p>\n

Step 12. Change color of counties<\/h3>\n

We’re ready to change colors now! Loop through all the paths, find the unemployment rate from the\u00a0unemployment<\/code>\u00a0dictionary, and then select color class accordingly. Here’s the code:<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n# Color the counties based on unemployment rate<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nfor<\/code>\u00a0p\u00a0<\/code>in<\/code>\u00a0paths:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>\u00a0p[<\/code>'id'<\/code>]\u00a0<\/code>not<\/code>\u00a0in<\/code>\u00a0[<\/code>\"State_Lines\"<\/code>,\u00a0<\/code>\"separator\"<\/code>]:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code># pass<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>try<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>rate\u00a0<\/code>=<\/code>\u00a0unemployment[p[<\/code>'id'<\/code>]]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>except<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
9<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>continue<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>\u00a0rate >\u00a0<\/code>10<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a05<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>elif<\/code>\u00a0rate >\u00a0<\/code>8<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a04<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>elif<\/code>\u00a0rate >\u00a0<\/code>6<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a03<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>elif<\/code>\u00a0rate >\u00a0<\/code>4<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a02<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>elif<\/code>\u00a0rate >\u00a0<\/code>2<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a01<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>else<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a00<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
24<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color\u00a0<\/code>=<\/code>\u00a0colors[color_class]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
25<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>p[<\/code>'style'<\/code>]\u00a0<\/code>=<\/code>\u00a0path_style\u00a0<\/code>+<\/code>\u00a0color<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

Notice the\u00a0if<\/code>\u00a0statement. I don’t want to change the style of state lines or the line that separates Hawaii and Alaska from the rest of the states.<\/p>\n

I also hard-coded the conditions to decide the color class because I knew beforehand what the distribution is like. If however, you didn’t know the distribution, you could use something like this:\u00a0float(len(colors)-1) * float(rate - min_value) \/ float(max_value - min_value)<\/code>.<\/p>\n

Step 13. Output modified map<\/h3>\n

Almost done. We just need to output the newly colored SVG map.<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n# Output map<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\nprint<\/code>\u00a0soup.prettify()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

Save your Python script. For the sake of completeness, here’s what your Python script should now look like:<\/p>\n

\n
\n
\n\n\n\n
1<\/code><\/td>\n### color_map.py<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\nimport<\/code>\u00a0csv<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\nfrom<\/code>\u00a0BeautifulSoup\u00a0<\/code>import<\/code>\u00a0BeautifulSoup<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n# Read in unemployment rates<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\nunemployment\u00a0<\/code>=<\/code>\u00a0{}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\nmin_value\u00a0<\/code>=<\/code>\u00a0100<\/code>; max_value\u00a0<\/code>=<\/code>\u00a00<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
9<\/code><\/td>\nreader\u00a0<\/code>=<\/code>\u00a0csv.reader(<\/code>open<\/code>(<\/code>'unemployment09.csv'<\/code>), delimiter<\/code>=<\/code>\",\"<\/code>)<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
10<\/code><\/td>\nfor<\/code>\u00a0row\u00a0<\/code>in<\/code>\u00a0reader:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
11<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>try<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
12<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>full_fips\u00a0<\/code>=<\/code>\u00a0row[<\/code>1<\/code>]\u00a0<\/code>+<\/code>\u00a0row[<\/code>2<\/code>]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
13<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>rate\u00a0<\/code>=<\/code>\u00a0float<\/code>( row[<\/code>8<\/code>].strip() )<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
14<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>unemployment[full_fips]\u00a0<\/code>=<\/code>\u00a0rate<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
15<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>except<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
16<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>pass<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
17<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
18<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
19<\/code><\/td>\n# Load the SVG map<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
20<\/code><\/td>\nsvg\u00a0<\/code>=<\/code>\u00a0open<\/code>(<\/code>'counties.svg'<\/code>,\u00a0<\/code>'r'<\/code>).read()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
21<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
22<\/code><\/td>\n# Load into Beautiful Soup<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
23<\/code><\/td>\nsoup\u00a0<\/code>=<\/code>\u00a0BeautifulSoup(svg, selfClosingTags<\/code>=<\/code>[<\/code>'defs'<\/code>,<\/code>'sodipodi:namedview'<\/code>])<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
24<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
25<\/code><\/td>\n# Find counties<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
26<\/code><\/td>\npaths\u00a0<\/code>=<\/code>\u00a0soup.findAll(<\/code>'path'<\/code>)<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
27<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
28<\/code><\/td>\n# Map colors<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
29<\/code><\/td>\ncolors\u00a0<\/code>=<\/code>\u00a0[<\/code>\"#F1EEF6\"<\/code>,\u00a0<\/code>\"#D4B9DA\"<\/code>,\u00a0<\/code>\"#C994C7\"<\/code>,\u00a0<\/code>\"#DF65B0\"<\/code>,\u00a0<\/code>\"#DD1C77\"<\/code>,<\/code>\"#980043\"<\/code>]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
30<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
31<\/code><\/td>\n# County style<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
32<\/code><\/td>\npath_style\u00a0<\/code>=<\/code>\u00a0'font<\/code>-<\/code>size:<\/code>12px<\/code>;fill<\/code>-<\/code>rule:nonzero;stroke:<\/code>#FFFFFF;stroke-opacity:1;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
33<\/code><\/td>\nstroke<\/code>-<\/code>width:<\/code>0.1<\/code>;stroke<\/code>-<\/code>miterlimit:<\/code>4<\/code>;stroke<\/code>-<\/code>dasharray:none;stroke<\/code>-<\/code>linecap:butt;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
34<\/code><\/td>\nmarker<\/code>-<\/code>start:none;stroke<\/code>-<\/code>linejoin:bevel;fill:'<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
35<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
36<\/code><\/td>\n# Color the counties based on unemployment rate<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
37<\/code><\/td>\nfor<\/code>\u00a0p\u00a0<\/code>in<\/code>\u00a0paths:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
38<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
39<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>\u00a0p[<\/code>'id'<\/code>]\u00a0<\/code>not<\/code>\u00a0in<\/code>\u00a0[<\/code>\"State_Lines\"<\/code>,\u00a0<\/code>\"separator\"<\/code>]:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
40<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>try<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
41<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>rate\u00a0<\/code>=<\/code>\u00a0unemployment[p[<\/code>'id'<\/code>]]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
42<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>except<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
43<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>continue<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
44<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
45<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
46<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>if<\/code>\u00a0rate >\u00a0<\/code>10<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
47<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a05<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
48<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>elif<\/code>\u00a0rate >\u00a0<\/code>8<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
49<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a04<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
50<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>elif<\/code>\u00a0rate >\u00a0<\/code>6<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
51<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a03<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
52<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>elif<\/code>\u00a0rate >\u00a0<\/code>4<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
53<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a02<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
54<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>elif<\/code>\u00a0rate >\u00a0<\/code>2<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
55<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a01<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
56<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>else<\/code>:<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
57<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color_class\u00a0<\/code>=<\/code>\u00a00<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
58<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
59<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
60<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>color\u00a0<\/code>=<\/code>\u00a0colors[color_class]<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
61<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>p[<\/code>'style'<\/code>]\u00a0<\/code>=<\/code>\u00a0path_style\u00a0<\/code>+<\/code>\u00a0color<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
62<\/code><\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
63<\/code><\/td>\nprint<\/code>\u00a0soup.prettify()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

 <\/p>\n

Step 14. Run script and save new map<\/h3>\n

Now all we have to do is run our script and save the output.<\/p>\n

Running script in OS X Terminal\"terminal-out\"<\/a><\/p>\n

We’re done! Open your SVG in FIrefox or Safari, and you should see a nicely colored map similar to the one below.<\/p>\n

\"choropleth06\"<\/p>\n

Oh wait, there’s one teeny little thing. The state borders are still dark grey. We can make those white by editing the the SVG file manually.<\/p>\n

We open our new SVG in a text editor, and change the stroke to\u00a0#FFFFFF<\/code>\u00a0from\u00a0#221e1f<\/code>around line 15780. Do something similar on line 15785 for the separator. Okay. Now we’re done.<\/p>\n

Where to Go From Here<\/h3>\n

While this tutorial was focused on unemployment data, I tried to keep it general enough so that you could apply it to other datasets. All you need are data with FIPS codes, and it should be fairly straightforward to hack the above script.<\/p>\n

You can also load the SVG into Adobe Illustrator or your favorite open source vector art software and edit the map from there, which is what I did for the\u00a0final graphic<\/a>.<\/p>\n

So go ahead. Give it a try. Have fun.<\/p>\n

For more examples, guidance, and all-around data goodness like this,\u00a0order Visualize This<\/a>, the FlowingData book on visualization, design, and statistics.<\/p>\n

<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/div>\n
\n

Become a FlowingData member, and get instant access to tutorials and resources.<\/p>\n

Join Now<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

By\u00a0NATHAN YAU There are about a million ways to make a choropleth map. The problem is that a lot of solutions require expensive software or… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-424","post","type-post","status-publish","format-standard","hentry","category-arcgis"],"_links":{"self":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts\/424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/comments?post=424"}],"version-history":[{"count":0,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts\/424\/revisions"}],"wp:attachment":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/media?parent=424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/categories?post=424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/tags?post=424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}