City Labels on Maps

Posted in Maps at 6:35 pm by ducky

When I watched people look at my cartograms, I saw that they frequently had trouble figuring out which distorted shapes on the map corresponded to which shapes on the more familiar non-distorted maps they were familiar with.

Cartogram without labels

Clearly, I needed to give them some reference points.

The first thing that I thought of doing was distorting Open Street Map tiles to match the cartographic distortion.  That didn’t work out so well, and I decided that I could get 90% of the benefit just by showing city names.

The next thing I tried was to make tiles with city names on them.  This turned out to be difficult because city names frequently crossed tile boundaries, and the city names were variable widths.

What worked: I made markers with custom icons, where the icon was an image of the city name, and placed the icons at the appropriate location on the cartogram.  This worked well: the city names moved with the background image when dragged, and creating the custom icons was quite lightweight.

Having solved how to show city names, I then needed to figure out when to show city names.  Clearly I should show bigger cities first, but if you zoom in, you want to see smaller cities.  I don’t know how Google does it, but they probably can afford to decide on a city-by-city basis at which zoom level that city should appear, but there are an awful lot of cities and an awful lot of zoom levels, and my name’s not Google.  I can’t afford to do that.

I experimented with coming up with a formula to specify what population threshold to use for which zoom level, but I was unsatisfied with that.  I couldn’t find a formula which would show enough cities in lightly-populated areas but not too many in densely populated areas.

The next thing I tried was to figure out which area of the map was showing, and to label only the top six (by population) visible cities. This means that you see only really big cities when zoomed out a lot:

Six biggest cities labelled

But when you zoom in (or move so that one of the labelled cities stops being in the view), more cities appeared:

(When I did this, I was surprised to find out how small (in population) some major cities are.  Jacksonville, FL is bigger than Miami.  Indianapolis is bigger than Boston.  El Paso is bigger than Seattle.  Now, partly that’s because I’m labelling cities and not metro areas, but it still surprised me.)

Even only showing six, there were still times when the cities names got crowded.  Also, when way zoomed out, big sections of the country didn’t have any labels.  What I finally did was look at the top 23 visible cities, and if there was a larger city nearby (in pixels), I skipped the smaller city.  This seems to work really well:

It sure beat keeping a list of which cities to show at which zoom level!



Cartographic “suicide caucus” map

Posted in Art, Maps at 10:13 am by ducky

Ryan Lizza posted an article and map in the New York Times which showed the locations of the US Congressional Districts whose Representatives backed the US federal government’s shutdown in an attempt to defund Obamacare.  Here is a version of the map which I made, with yellow for the “suicide caucus”:


The article and map were good.  I liked them.  But there’s a real danger when looking at a map that you will — consciously or unconsciously — mentally equate the relative number of pixels on a map into the relative number of people.  

Unfortunately, the geographical distribution of people is wildly, wildly uneven: from 0.04 people per square mile in the Yukon-Koyukuk Borough to more than 70,000 people per square mile in Manhattan.  Yes, there are 1.75 MILLION more people per square mile in Manhattan than rural Alaska.

The map above makes it look like a higher percentage of congresspeople supported the shutdown than actually did.  If you look at the shutdown districts on a cartogram — a map where the area of a congressional is distorted to be proportional to the population of that district — instead, it becomes even more clear just how few representatives were involved.


I have made a web page where you can explore congressional districts yourself.

In addition to seeing the maps above, you can also see thematic maps (both cartogram and regular) of

  • percent without insurance
  • percent white
  • median family income
  • median gross rent
  • median home value
  • percent living in poverty
  • percent of children living in poverty
  • percent of elderly living in poverty
  • median age
  • congressional election results from 2012

Additionally, if you click on a congressional district, you can see who represents that district, plus all of the above values for that district.  If you click on the map away from a congressional district, you can see a table comparing the shutdown districts with the non-shutdown districts.

You can also look at maps for the presidential 2012 election results and seasonally-adjusted unemployment, but because those are county-based figures, you can’t do a strict comparison between shutdown/non-shutdown districts, so they aren’t in the comparison table or the per-district summaries.

Implementation notes

I used ScapeToad to generate the cartograms.  It was a lot of trial and error to figure out settings which gave good results.  (For those of you who want to make cartograms themselves: I defined cartogram parameters manually, and used 6000 points for the first grid, 1024 for the second, and 3 iterations.)

I used QGIS and GRASS to clean it up afterward (to remove slivers and little tiny holes left between the districts sometimes) and to merge congressional districts to make cartogram shapes.

NB: I use the state boundaries which I created by merging the cartogramified congressional districts, even for the maps which are based on counties (e.g. unemployment and the presidential results).  It is pretty impressive how well the merged congressional district state boundaries match the county cartogram state borders.  It wasn’t at all obvious to me that would happen.  You could imagine that ScapeToad might have been more sensitive to the shapes of the counties, but somehow it all worked.  Kudos to ScapeToad!

At some zoom levels, not all the district boundaries get drawn.  That’s because I don’t want the map to be all boundary when way zoomed out, so I check the size before drawing boundaries.  If the jurisdiction is too small, I don’t draw the boundary.

As a starting point, I used the Congressional District shapefiles from the US Census Bureau. For the population used for generating the cartogram, I used the Census Bureau American Community Survey 2011 values.  For the other map attributes, I specify the source right under the “Color areas by”.

I made the map tiles myself, using custom PHP code.  You can read more about it in Optimizing Map Tile Generation.  I came up with my own algorithm for showing city labels.