Play : Learn : Sasquatch

I made the above map to learn a few things and have a little fun. You can see the full version here. I made it because I wanted to figure out what to use to rotate markers to a bearing and animate markers along paths generated by an API. I used the TriMet API for Portland’s public transit vehicle locations, which is in beta according to the website. There are categories of markers, paths to follow of varying lengths, and bearings.

…and what if the markers where something like northwest monsters? That would be fun.

For the type of project described above, I try to make learning something new a part of the design. And then assemble the tools for the job.

It is easy to pick your tools first. Either because we are used to them, or they are comfortable, or they are what the cool kids are using, etc. I’m guilty of it too!

So many tweets can be boiled down to “look what I made with ‘x’”. And again, I’m guilty of it too!

I am almost always interested in the first 4 words of that sentence, the “Look what I made…” part. I always want to see what creative and interesting maps and visualizations people come up with.

As soon as you pick your tools, the possible outcomes are limited. But when you design first, without thinking about whether you can do it with tool ‘x’, the possibilities are only limited by imagination.

It is as much a mental exercise as anything. Often clients make certain tools required or a project needs to happen fast. In those cases we all just use our favorite hammer. But when building to learn I will always try to avoid opening my tool box first. I try to come up with something fun to make and then acquire the bits necessary to make it happen.

That said, half the shit I’ve done lately has been using the same tools.

So, the code for the monster map is here.

More Neighborhoods

neighborhoodsI presented about the neighborhood project at the NACIS conference in Greenville, SC in October of this year. I talked a little about how the site was then, but mostly pointed out what I wanted to improve. A new version is posted HERE. The major issues for me were:

  1. User contributed comments were not visible.
  2. The data was not easily accessible.
  3. The code was not open and available for folks to implement on their own.



Descriptions like the one above were collected in the old version, but couldn’t be accessed live. Obviously, someone put time and thought into their description here. It was a shame that these descriptions were not visible. But now they are! Here are some more of my favorites.



That last one is revealing in many ways. There is something potentially problematic about the term ‘neighborhoods’ that was brought up at the NACIS presentation by Dennis McClendon referencing Chicago. He brought up that people often use their parish to describe where they live, and also asserted that the African-American community may give you an intersection when asked what area do you live in. Things to think about in future iterations, or if anyone makes their own version. I’m really looking forward to other comments that reveal perceptions or ideas of place that I was not aware of.

The Data


First, the data is available to download directly from the site. There is a new little toolbar on the right which has a download button. The data comes in shapefile format, and will include all geometries including those that have been flagged as junk or inappropriate. But, here is a Direct Link to the latest data. This will include everything, even items added just now thanks to cartDB’s ability to export directly.

The Code


The code for this project is freely available on GitHub. I would love to hear if you do anything with it. And also if you make any improvements. (There is plenty of room for improvement). Here is the Direct Link.

The Design and New Features

Online maps do not need to be ugly. You can create cartography online, and even in web Mercator. As you can see from the first screen shot, we are pretty much in greyscale. Thanks to Stamen Design’s Toner base, it was pretty easy to set up. I wanted color to only come from User Contibutions. So you won’t find color until you start contributing or viewing other contributions.

The colors  for highlighted neighborhoods was fun to create. You are limited to 30 highlighted hoods, which is much more than the 12 you could highlight in the old version. The colors come from a fantastic tool I found on the web for generating distinguishable palettes called I Want Hue. Not a replacement for Color Brewer, but a great option if you need a larger set of qualitative colors than CB will provide.

Highlighted hoods are shown with little inset maps of each version of the neighborhood. Additionally now you can Love and Flag neighborhood. I really just needed the flag functionality so the community could police itself, but that seemed to be too negative, so I added the love button to cheer things up a bit. You can see the flag and love buttons here.

swanislandAre you still reading?

OK, that is a lot. But some of it is important to why the site is what it is. I think we can have a truly beautiful cartographic conversation about place through tools like this. The cartography builds itself through contributions.  I know I’ve already learned some things about areas I’m not familiar with from reading neighborhood comments on the site. So I hope you join in the conversation or start one of your own with the code.



Opacity Stacks

Opacity is multiplicative!

For the Draw Your Neighborhoods site I wanted to allow contributors and anyone else interested to access instant feedback. Given that it was an off time project, and designed as a learning experience for myself with certain tools (Leaflet, cartoDB, etc.), I did not want to spend a lot of time, or any time really, mucking with the data in the short term. But I did want anyone who contributed to be able to get an instant view of their contribution. So I had to come up with something that could be automated and would respect individual contributions.

So I decided that I would simply allow overlapping transparency to guide the user towards areas of agreement or disagreement. Above is an example. The Wallingford neighborhood in Seattle has 4 versions drawn by various contributors, with a relatively high level of agreement. Using what I’ll call an opacity stack, you can pretty well understand where agreement and disagreement exist.

The process turned out to be a little more complex than I originally expected. The problem is as follows, given N neighborhoods, what opacity should be used to reach a total opacity of 0.8 (my arbitrary choice). Originally I thought this would mean using opacity with an additive blend mode and simply dividing 0.8 by N. Well, CartoCSS does not provide additive blending of opacity(Or didn’t, maybe it does now, these things move fast).

Opacity is multiplicative. Imagine light passing through windows that are 50% opaque. Two windows would not block all of the light, the first would block half of the light, then the second would block half of the remaining light. This is illustrated (poorly) below.

So how would the site come up with the appropriate opacity for a specific highlighted neighborhood?

The answer (hey kids, you will use it when you grow up): Algebra.

Doing a #lazyweb search for the formula, I found a great post here. It contains the basic formula for combined transparency. Which is fairly intuitive once you consider the natural behavior of light as outlined above.

 opacity_new = 1 - (1 - opacity_a) * (1 - opacity_b)

With this formula our problem becomes clear. We want opacity_new to always be 0.8. And we want that true for N elements. Which results in this formula:

0.8 = 1 - (1-x)^N

We want to solve for x where N is the number of instances of a selected neighborhood within the database. After refreshing my algebraic brain, with the help of my wife, Alicia Miao, the formula to solve for the oppacity(x) of N objects to add to an opacity of 0.8 is:

x = 1 - Nth root(.2)

The formula results in an interesting slope as N increases. The slope works well with what we are trying to show with the overlapping polygons. As more contributions are made it becomes harder to ‘move’ the neighborhood. Here is the opacity curve. And that background isn’t just some chart junk, it shows a gradient from opacity of 0 to 0.8.

This formula is plugged into the code that creates the CartoCSS that is used as the style for the tiles generated when you highlight a neighborhood. After getting the neighborhood name and the number of drawings that have been made of the specified neighborhood, the values are plugged into the formula, and CartoCSS is created.

var n =;
var c = neighborhood.count;
var fillOpacity = 1-(Math.pow(.2,1/c));
style += "[name = '"+n+"']";
style += "{polygon-fill:"+userNeighborhoods[i].color+";polygon-opacity:"+fillOpacity+";}";

In the case of Wallingford in Seattle, N = 4. With an N of 4, the above formula finds that the opacity(x) should be 0.33126. Go ahead, plug it into the formulas above….

OK, now that we have that confirmed, we write it into CartoCSS, and ship that off to the CartoDB machine and some how get back pretty tiles. Just like that! This all happens when you click ‘View Maps’ and highlight a neighborhood.

Opacity stacks share some cartographic considerations with Value by Alpha mapping. Check it out here. While Value by Alpha represents well thought out cartographic exploration and experimentation, Opacity Stacks (oh, I capitalized it like it’s a thing!) represent a briefly considered, sloppily implemented, easy answer to real time visualization of overlapping polygons. What these techniques do share is the effective use of visual weight to represent some aspect of the data. In the neighborhood map, this is the number of contributions, and cumulatively, the agreement of contributions. Unfortunately, I just checked my copy of ‘Semiology’ and there was no mention of opacity or ‘weight’. I’ve gone down another cartographic cul-de-sac, and I’m just riding my Mongoose around the empty lot at the end of the block.

Personal flashbacks aside, I still recommend checking out the tools used for this project, including CartDB, CartoCSS, Leaflet. I hope to post some improvements to the site shortly, including availability of comments like the one here. “…But I don’t trust them”. I love it. And a link to download the data (From the public, to the public right?).


Lots, but here is one; Conflict creates conflict. The opacity stack formula is based on single neighborhoods, and gives a great view of agreement/disagreement for a single discreet neighborhood. It is carto crap when polygons of different neighborhoods overlap.

Each of the above Portland neighborhoods overlap, but have various drawing counts. ‘Kerns’ and ‘southeast’ are drawn once, while Laurelhurst has 2 versions. So their opacity is calculated only for their own internal N, and overlapping areas are muddy. This isn’t a big enough issue that I feel the need to fix it right away, but it could be really interesting to use some kind of comp-op in the new CartoDB 2.0 with expanded support for CartoCSS to create some blends when neighborhoods have conflict. And of course we could do some more sophisticated analysis of the data to create better maps, but I think the opacity stack works in a pinch.

Most of the maps are screen shots from Draw Your Neighborhood.

As always, your cartographic feedback is appreciated!

Neighborhoods Project – Portland, Seattle, Vancouver

This Project is an attempt to map neighborhoods as one piece of a city’s image. Neighborhoods can be generally defined as two-dimensional sections of a city that have a defined extent. They are areas which you can enter or exit or use to mentally orient within a city. Real and imagined, neighborhoods make a difference in every aspect of our lives. They are zones of inclusion and exclusion, used by municipalities, realtors, school districts, tourists and locals to define what is special or unique about a place or even how you can interact with a space. Neighborhoods are defined by all of the people moving in, out and through them.

The project lives at

The site was built to allow you to map neighborhoods in Portland, Seattle, and Vancouver, BC.

Neighborhood names are not defined. It will be great to watch as neighborhoods develop and overlap from user contributions. Especially the way areas of agreement and conflict, inclusion and exclusion emerge from your contributions.

There are a few questions once you submit your neighborhood, but the only required one is ‘Neighborhood Name’. Simply select from that list as you type if the name exists already, or add your own. 

Once you add your neighborhood (or hopefully many neighborhoods), check out the live results! Click ‘View Maps’ to see what has been contributed so far. Here is a screen shots from test data.

Toggle the base map and Highlight Neighborhoods for a pretty map of the geometry of neighborhoods;

An opacity formula is used to generate the appropriate opacity for n contributions so the full opacity of overlapping polygons of the same neighborhood is always .8. CartoDB is being used to save and generate result tiles. It was great to work with and I recommend giving it a look. In addition, this site was built using Leaflet, Bootstrap, CartoDB, cartoCSS. Mapquest Tiles, and more. I’ll go over technical details in another post.

If you know Portland, Seattle, or Vancouver, BC — Please Contribute!

I also want to point out that this project took considerable inspiration from Bostonography’s ‘Mapping Boston’s Neighborhoods‘. If you can contribute there, go for it.

  “…we must learn to see the hidden forms in the vast sprawl of our cities” - The Image of The City, Lynch 1960

Portland Bridges Update

You can see the old version of the bridge map in this Previous Post. Here are some images from the new map. It now has all 11 bridges across the Willamette in Portland. The goal here was to be incredibly simple, highlight the bridge locations and profiles, and show how people can get across them. I think it gets there, and as always feedback and criticisms are welcome.

It is of course free to download as a full resolution PDF HERE. If you would rather order a print, you can do that HERE. Half of any profits made on these maps will go to Friends of Trees! Look for their signs when you are in Portland or Eugene. I also plan to bring a stack to give away at NACIS next week. The prints were done by Green Solutions Printing in Eugene, and I think they did a great job. I love the smell of the printer in the morning!


Pacific Northwest Pt.2

Part 1 was about a couple of cultural borders. This time we address a physical geographical calamity of epic scale. I recently had the opportunity to make some simple maps of the Missoula Floods for a book that will soon be available about the Fanno Creek basin south-west of Portland, OR. The floods occurred occasionally around 13k to 15k years ago in the Pacific Northwest. The flood crested at about 400′ above sea level in the Portland area. 
The floods were the result of breeches in the ice dam that held massive glacial Lake Missoula in place. The lake held as much as half the volume of Lake Michigan! The Missoula Floods caused massive erosion stripping away topsoil and rock, basically scouring the landscape between Missoula and Portland and either on to the coast or down the Willamette Valley. The waters would eventually recede and deposit much of that fertile soil and the occasional erratic boulder in the Willamette Valley.
Amazing giant current ripples are still visible in the landscape of eastern Washington. This paper by Prof. Keenan Lee has some great images and info about giant current ripples.
The floods had an immediate physical impact across the PNW, but the impact on the social and cultural development of the areas persists today in many ways, ranging from what grapes grow best in the Willamette Valley to soil instability under houses perched on some over developed Portland hills.
The map below shows the location of Glacial Lake Missoula and the flood path. There are highlighted locations with specific significance to the Fanno Basin story, but you get the idea. An awesome amount of water traveled across what is now four states.
The detail box focuses on the Portland area inundation, shown below. The flow path is represented by arrows, and the flood crest is a 400′ contour. The current locations of some cities as well as the current path of the Columbia and Willamette rivers are also shown.

 As you can see, nearly the entire Portland area was under water. 

The opportunity to map the floods also gave me an idea for how to solve a map I had volunteered to make for NACIS 2012 in Portland, OR. Which is next week! Wahoo. 
The map is part of a collaborative project that some of the NACIS organizers put together. They sent a call for volunteers to map a tile in what is going to be a cartographic quilt. The Portland Urban Growth Boundary, UGB, was divided into tiles. Each tile was assigned to a naive volunteer cartographer. The tiles are shown here:

I was assigned the most north-easterly tile. It includes part of Oregon, Washington, and the Columbia River (Roll On).

My solution to avoid collecting transportation or other infrastructure data across state lines was to map the Missoula Floods. As mentioned, the high water mark in the Portland area is estimated to be about 400′ above current sea level.

All of the color map images in this post are from the map tile I created for that corner. I hadn’t opened Photoshop for a map project in a while, so it was fun to brush up on rusty skills, if not entirely effective map making.

There are some basic Photoshop techniques that played into creating this map. Patterns were used for the ground, ice, grass, and trees shown in the examples. The ‘Pattern Maker’ was successful for the ground/rock layer and the grass layer.

The ice layer looks a little too cloud like to me, especially close up, but I think it works OK at the intended resolution. The trees were given depth with both a slight drop shadow and bevel to the layer in PS. The sources for the patterns were gleaned from various air photos in Bing maps.

The water texture comes from a blank layer with filter->render->clouds applied  and then filter->sketch->chrome. Add some color and you’re good. I based the process on a few internet tutorials including this one. There is a simple hillshade and DEM under the flood layer to hint at depth.

The only reference to current physical geography (aside from the DEM being current data!) is the path of the Columbia River. It is severely muted. I think this would be too muted for the map on its own, but as a tile in a larger map, I think it will effectively continue the path of the river. I have to imagine that the others will highlight the river more than I have here, and hopefully create contrast between the river and floods that happened 13k-15k years ago.

Here is the whole tile, low res. I have left off scale and N arrow because this map will be combined with several others, and I think there will probably be a master scale and orientation to the whole thing. Annotation was kept minimal and muted to try not to conflict too much with other tiles which may or may not include text. I will try to post a copy of the entire quilt if I can after NACIS. We’ll see.

Since this is PNW pt.2, we need to add the lake and flood to our extentPNW map. Part one highlighted the cultural borders of the Oregon Country and the State of Jefferson. Those are still shown here with the addition of the Missoula Lake and Floods. The floods do not stretch the extent of the PNW as mapped, but certainly contribute to an understanding of an extraordinary historical event that connects much of the area. 

PNW Music Bonus!
Here is a little music from PNW band Finn Riggins. A great band from Boise. This tune seems appropriate for the theme of the Missoula Floods

For more about the floods I encourage you to check out  ‘Cataclysms on the Columbia’, a great overview of the Missoula floods.

The Mean Streets of PDX

It’s Portland MADNESS at ExtentPNW! In anticipation of NACIS 2012 and with shameless hopes of piggybacking on the momentum from Nick’s awesome map of Portland’s bridges, in this post I’ll share some quick maps I made of the streets of Portland using Metro data. The first uses color variations to show changes in address numbers for the Portland area: double-digit addresses begin at red and then progress through the color spectrum as the numbers increase.

Although this map is wholly unoriginal (see Andy Woodruff’s “Paint by Numbers” post, as well as a follow-up for San Francisco at The Swordpress) and more artsy than data-y, some interesting aspects of the area’s geography jump out. The vertical and horizontal banding comes from numbers steadily radiating outwards from downtown Portland, mostly along Avenues and Streets (more on that in a moment). One of my favorite aspects of this map is how it shows the independent street numbering schemes of Portland’s satellite cities – hence the several nuclei of red, low-numbered addresses. Interesting patchwork effects pop up in many places, depending on which roads buildings front onto, which I assume are the results of decades of layered policies and development planning. Portland’s urban growth boundary is also distinctly visible. Vancouver, Washington is the inexplicably stripey black hole of no data in the top right of the image.

The second set of maps is also essentially devoid of originality (it’s sort of my thing). Echoing Bill Rankin’s street toponym maps, I made a series of graphics showing the patterns created by isolating the most numerous street names in the PDX Metro area. Most popular are Streets and Avenues:

Click to enlarge.

Nothing particularly groundbreaking: Avenues run from north to south, while Streets tend to  go from east to west. Still, similar to the patchwork on the address numbers map, the anomalies in these two images are interesting. One of the most prominent is a distinct “X” pattern visible southwest southeast of downtown Portland (near all of the bridges!). This is Ladd’s Addition, Portland’s first planned neighborhood. I’m not an expert on the city by any means – I wonder how many other stories about the history, landscape, culture, or economy of the area are hiding behind these variations in the density and direction of Streets and Avenues? (Share in the comments if you notice anything!)

I’ll leave you with a few more street maps to ponder (in order of name frequency): Roads, Drives, Courts, Lanes, and Places. Although the patterns for these names aren’t as dense as those of Streets and Avenues, the images highlight a few interesting things, such as changes in elevation and transitions from high-density areas to suburbs.

Portland’s Bridges

The bridges in Portland are not only plentiful, they are also beautiful and hard working. I was in Portland a few weeks ago to watch the Timber’s beat the San Jose Earthquakes. The following morning I was gripped by the idea that I had to map the bridges. So I did, and here is what I have done so far. Any comments are appreciated!

Click here for a PDF of the whole deal-e-o.

The plan view:Some of the sketches:

Legend, sources, scales, and such:

Pacific Northwest Pt.1

extent(PNW) is a place for thoughts on cartography and geography about the Pacific Northwest…or from the Pacific Northwest, or at the very least, with a distinctly PNW perspective. So, where is the ‘Pacific Northwest’? quick web search reveals this satelite image used by many sites to describe the PNW. It isn’t wrong, but it is ambiguous. Somewhere in that rectangle is a region built by subduction, lift, culture, and borders that we call the Pacific Northwest


I’m only going to talk about two of the many man made borders that could be considered when discussing the Pacific Northwest. The Oregon Country and Jefferson (the state that never was).

Below is a map made using D3. It shows the progression of administrative regions in Oregon between 1843 and 2000. The original Oregon Country is the closest administrative boundary I have seen that could be considered the extent of the PNW all on its own.

Oregon Country makes a pretty good stand in for the Pacific Northwest, but I can’t help suggesting one more political/cultural region to round things out, and that is the ‘State of Jefferson‘.

In 1941 mayor Gilbert Gable of Port Orford, Oregon announced the impending secession from Oregon and California by a group of southern Oregon and northern Californian counties to create what would have been the 49th state in the union.
State of Jefferson

The counties in the above map make up one concept for the State of Jefferson. Shasta and Lassen counties did not end up agreeing to the secession from California, and only Curry in Oregon formally signed on. I will still include the California counties of Shasta and Lassen in our Pacific Northwest based on their inclusion in this and subsequent visions of the State of Jefferson.

Combining the original Oregon Territory with the State of Jefferson we get the following administrative boundary based Pacific Northwest.

The above boundaries, real or not, create a pretty nice regional boundary. There are certainly some missing bits, and some extra bits. Click here for Part 2 which discusses the Missoula Floods.