At last October’s NACIS Practical Cartography Day I gave a very sweaty presentation that was later described as bewildering and incoherent.  I had always meant to partially redeem myself by packaging and cleaning up the code that formed the basis of that talk.  And here it is!

OL-Symbology is just a small JavaScript library for easily creating 5 basic thematic map types dynamically in OpenLayers: choropleth, proportional symbol, cartogram, dot density, and isoline. Each basic symbology includes many options for customization, and symbology classes can be combined to create multivariate thematic layers. Below I’ll go through the background and specific features of the library; if you just want to check out the code, head over to the Github page for the project.

Impetus

OpenLayers has been around for six years now, and really is the most fully-featured web mapping platform going. I’d argue that it’s been used mostly for reference mapping, as opposed to thematic data mapping. I first saw OL used for thematic mapping in choropleth and proportional symbol applications in 2008. I added noncontiguous cartograms to the mix last year.

These previous implementations, though, were all written and presented more or less as “one offs”. That is, they weren’t packaged up as classes to be re-used by other developers; rather they were all more proofs of concept. I wanted to expand and develop a library of classes that would allow end developers or cartographers to easily create basic thematic mapping types with very little code. Before getting into the library, I need to mention the one previous attempt I know of to do pretty much the same thing: the MapFish widgets for choropleth and proportional symbol mapping.

MapFish is a RIA framework for web mapping that uses OpenLayers as its map engine. I saw the two MapFish thematic mapping widgets mentioned in the 2008 post by Bjørn Sandvik on choropleth mapping with GeoJSON, and I’m really not sure that any work has been done on them since then. Though the MapFish widgets are quite limited — only one color scheme for choropleth, no classed choropleth or unclassed proportional symbols, only one shape type available for proportional symbols — I did borrow some ideas from the format and organization of the two widgets. Before talking about the five individual thematic mapping types in my library, I’ll just go through a bit of what they hold in common.

Common features

To create a new thematic layer, the user/developer only needs to set three options:

1. url or layer: a data source, in the form of a URL string or a pre-loaded Vector Layer
2. indicator or valuator: the name of the variable (attribute/indicator) that you are representing with this symbology. If you need to standardize your variable (ex. disease cases divided by population) just define the optional valuator function
3. map: the Map instance that the thematic layer should be added to

All other symbology settings are optional and have at least semi-intelligent defaults. So, most basically:

That would create a completely serviceable isarithmic representation and add it to your map, though you’d likely want to customize it by at least setting the isoline interval option (the default is 5; see below).

Each thematic map type has unique options (colorScheme for choropleth, maxSize for proportional symbols, etc.); but they share a few classification options: classed, numClasses, classification method, and classBreaks. The classification method is currently limited to quantiles or equal interval, though any breaks can be applied by setting the classBreaks option. Below I’ll just touch on the 5 thematic map types and the symbology options that can be applied to each.

Symbologies

Choropleth

Choropleth is one of the most basic thematic mapping types, and was the first I programmed for this library. To add a choropleth layer to your map, the only required options are the indicator and url:

To create a more custom representation, the class includes many different symbology options:

The color scheme “GnBu” is the name of a ColorBrewer color scheme. All of the ColorBrewer schemes are available just by referencing their reference name. Alternatively users can set the colors property to any custom colors they’d like.

One property not shown above is the colorStrokes boolean. If set to true, feature strokes will also be colored. While this can be applied to polygonal features in a traditional choropleth map, it is perhaps most useful in applying a choropleth symbology to isolines or other linear features (see “multivariate symbologies” below).

Here’s an advanced example that shows most of the options available in the Choropleth class.

Proportional Symbol

Proportional symbols are another basic representation of a quantitative dataset, and can be created just as simply as choropleth layers (above). As with all other symbologies, proportional symbols may be classed (graduated) or unclassed. Symbols themselves can be circles, squares, or triangles; the correct area will be applied no matter what shape is chosen. Similar to the colorStrokes property of the Choropleth class, the ProportionalSymbol class includes a sizeStrokes option that allows feature strokes to be sized instead of feature areas. This property is most useful in multivariate applications (for example, sizing the strokes of isolines to represent the value of each isarithm).

A unique feature of this library is that it allows for perceptual scaling of proportional symbol features. Back in they heyday of psychophysical research in academic cartography, a lot of studies showed that map readers routinely underestimated the size of areal symbols. To correct for this, symbols can be scaled up by an exponent derived from a power function designed to estimate the relationship between actual and perceived size of symbols. For academics and other researchers interested in tweaking the power function exponent, this can be set with the powerFunctionExponent option (the default is the .8747 average derived from James Flannery’s touchstone 1971 study). Most users should just ignore perceptual scaling and use the mathematical default.

Perceptual scaling and other options are shown off in this advanced example of the ProportionalSymbol class.

Noncontiguous Cartogram

I’m kind of a fan of noncontiguous cartograms — I’ve written about them here, here, and here. My noncontiguous cartogram class just extends the ProportionalSymbol class, so all options (besides shape; see above) for prop symbols are also available for cartograms (classification, perceptual scaling, etc.).

To see the Cartogram class in action, check out this example. And as before, I created a reproduction of the iconic noncontiguous cartogram from Judy Olson’s touchstone study of the form.

Dot Density

Another basic textbook thematic symbology is dot density, in which dots are randomly scattered across polygons in numbers according to their indicator value. The dotValue option controls the ratio of dots to indicator units, and thus the number of dots on the map. The dot size (as well as dot shape) can be set on the defaultSymbolizer object — a style object that each symbology class has that controls non-data related styling properties of the representation. View the source of this example for more.

You may notice that the dot density representation takes a while to process. The basic strategy for creating a dot density layer is to figure out how many dots need to be placed for each polygonal feature, and then to place those dots randomly within the bounds of the features. To accomplish this goal, dots are randomly placed within the bounding box of each feature and then tested to see if they actually lie within the feature. Though this requires some processing, it doesn’t need to be as slow as the current implementation in this library. It is slow only because I decided to use the built-in containsPoint method of the OpenLayers Polygon geometry class. This point-in-polygon method requires that random points be tested one-at-a-time; a much faster strategy (the one Andy and I used when developing this symbology for Indiemapper) is to use a points-in-polygon test that can test many points at a time. Eventually I’ll implement that method here but for now this class should work plenty fast with a small number of features and relatively high dotValue.

Isolines

Making your browser interpolate isolines is fun! I first did these in ActionScript 3 back in 2008. This JavaScript version works essentially the same way: generating a triangulated irregular network (TIN), interpolating isoline interval values along each triangle edge, and then connecting these interpolated points to form lines of constant value (isolines). See my older post for more description of the basic method. Check out this simple example of the OL-Symbology Isoline class.

The only options available to customize your isoline representation are interval (the distance in attribute space between lines) and showTIN (whether to show the triangulated irregular network used to interpolate the isolines). As described in the next section, you can also apply choropleth and proportional symbologies to your isolines after creation.

Multivariate symbologies

These thematic mapping classes were written in such a way that they can be easily combined to form bivariate and trivariate representations. Of course, this only makes sense with certain symbology combinations; and map readers are bad enough at interpreting univariate symbologies that increased complexity should rarely be attempted. But for those rare cases, OL-Symbology can be used like so:

That would create a noncontiguous cartogram and then color the features with a choropleth color scheme, accepting all defaults; see the example. There are a few things to note in the above. The requestSuccess method can be defined on any symbology object — it is called only once, when remote features have been loaded and processed. The choropleth class is instantiated in the above without a url option — that is because the features have already been loaded from the remote URL. Instead of defining the URL the layer option is set to the layer property of the cartogram representation. Interestingly, the exact same representation would be created by reversing the order and first creating a choropleth representation, and then sizing the features using a cartogram representation.

The same strategy was used to create the image at the top of this post of colored isolines. You can see a basic colored isolines example here. Other possible symbology combinations include proportional symbol + choropleth, dot density + choropleth, isolines + proportional symbols, and proportional symbol + proportional symbol (where the 2nd instance of the ProportionalSymbol class would apply to the proportional symbols’ strokes).

Limitations and next steps

When I presented this work last October, I also showed off a very similar library I’d written that works with Polymaps instead of OpenLayers. Those classes still need some work, and I’ll blog about them separately. The OpenLayers version I’m presenting here is really pretty full-featured, including basic and advanced options for all symbologies. This version is limited to OpenLayers, but the dependencies aren’t that deep so most of the code could be modified to work with another JavaScript mapping API.

Most classes are decently fast, with dot density being the only one I’d hesitate to use in production; but I’ll add my own point-in-polygon method to the dot density class soon. I hope the library is useful to at least a few others, either in pedagogical or production contexts. And it’s BSD licensed so do whatever you want with it!

Binning is a general term for grouping a dataset of N values into less than N discrete groups. These groups/bins may be spatial, temporal, or otherwise attribute-based. In this post I’m only talking about spatial (long-lat) and 2-dimensional attribute-based (scatterplot) bins. Such binnings may be thought of as 2D histograms. This may make more or less sense after what lies beneath.

If you’re just after that sweet honey that is my code, bear down on my Github repository for this project — hexbin-js.

Rectangular binning

The simplest 2D bin is rectangular. Indeed, for most purposes rectangular bins suffice, and their computational simplicity is a significant advantage.

The above is a shot from a little example I produced on jsFiddle, while learning Mike Bostock’s fantastic D3 JavaScript library for HTML and SVG data-binding and visualization. The example demonstrates the need for and the technique of 2D rectangular binning and aggregation.

Binning can be good for both the users and the creators/developers of static or interactive thematic maps or other visualizations. For the user, showing every single point can lead to cognitive overload, and may even be inaccurate, as overlapping points lead to a misreading of density.

In the above image (from Antaeus Concepts) the data points are represented in black, and due to overlap the true concentration/density distribution is indiscernible from the graphic.

A binned representation may reveal patterns not readily seen in the raw point representation of the data (see Antaeus’ sunflower plot for the same data below). For the developer or cartographer, too, binning can present an advantage, chiefly in efficiency. Back in the day, manual cartographers probably weren’t too keen on drawing 10’s of 1000’s of data points — I’m guessing they’d rather do the cheap bin math so that they could then only draw 10’s or 100’s of uniformly-shaped bins to represent the same data.

Though we modern cartographers have fancy-fangled computers to draw our data points for us, even these beasts hiccup when asked to draw 10,000+ points at once. Hiccups are acceptable in static rendering, but not in real-time apps that employ animation (as even at just 5 frames per second, rendering 1000s of points each frame would prove intensive for even newer home desktops).

So anyway, binned representations can be beneficial for both users and creators. Below I’ll just describe one binning method (hexagon binning, or hexbinning), its implementation, and some examples.

Hexagonal binning

I first encountered hexagonal binning in the sweet 2006 O’Reilly book by Joseph Adler, Baseball Hacks. Adler demonstrates the need for binning by showing a “spraychart” of David Ortiz’s 2003 balls-in-play.

Adler writes,

Clearly, you can see that David Ortiz tends to hit balls more often to right field. Wouldn’t it be nice to have a cleaner way to see this density? We’ll use another visualization technique, called hexagonal binning, to get a clearer picture of where Ortiz’s hits land.

The idea of hexagonal binning is to break a two-dimensional plane into different bins. First, the bins make interlocking hexagons. It is possible to use squares (or interlocking triangles or another shape), but hexagons look “rounder” than squares.

To turn his spraychart into hexbins, Adler used the hexbin package for R developed by Nicholas Lewin-Koh and Martin Maechler (inspired by Dan Carr’s work; more on this below).

Though unfortunately printed smaller in the book than the spraychart, I think the hexbin representation does effectively simplify the data while revealing patterns not easily retrieved from the full spraychart representation.

Hex history and theory

The technique of using interlocking hexagons to aggregate 2-dimensional data was first described in a 1987 paper by four Pacific Northwest Laboratory statisticians (D.B. Carr et al, “Scatterplot Matrix Techniques for Large N”). The authors note, though, that they were inspired by another binning technique — sunflower plots — described a few years earlier by William Cleveland and Robert McGill.

Cleveland and McGill (1984, “The Many Faces of a Scatterplot”) didn’t mention hexagons; indeed they specified that squares be used to bin the data, with each bin then being tranformed into a “sunflower”, with each “petal” representing a datum within the bin:

In their later 1987 paper, D.B. Carr et al suggested that hexagon-bin-based sunflowers represented the data more faithfully than the rectangular-bin version. They cite various reasons for this advantage, but I think it basically comes down to Joseph Adler’s later observation that “hexagons look rounder than squares”. Indeed, a regular tessellation of a 2D surface is not possible with polygons of greater than six sides, making the hexagonal tessellation the most efficient and compact division of 2D data space.

Besides hexbin sunflower plots, D.B. Carr et al note two other possible symbologies to employ once the data have been successfully hex-binned. To use thematic mapping parlance, the methods are proportional symbols and choropleth. These symbologies and other possibilities are discussed below.

Hexbin symbologies

Hexbinning consists of 1) laying a hexagonal grid or lattice atop a 2-dimensional field of data and 2) determining data point counts for each hexagon. This says nothing of the symbolization or representation method that can then be employed to communicate these counts to the graphic’s reader.

Sunflower plots

Sunflowers are likely the most complex symbology for representing hexbins, but I’m covering them first in this section because they actually inspired the hexbinning method itself.

The above screenshot is from the Antaeus statistics project, and hexagonal sunflower plots have also been implemented within the popular Stata statistics package:

Whether square-bin or hexbin-based, these sunflower plots are notable for allowing the user to simultaneously view generalities and retrieve specifics. A higher number of “petals” leads to a darker hexagon, and clusters of such hexagons will reveal the overall trend of the data. At the same time, individual petals can be counted to determine the exact number of data lying within each hexagonal bin.

Proportional symbol

The choropleth and proportional symbologies don’t really need any explanation here, so images should suffice.

Choropleth

Multivariate

In a multivariate hexbin representation, the secondary variable can be anything, though the sum or average of some attribute of the binned points within each hex would be typical.

In the below, a bivariate symbology is shown, though in this case the variable distribution represented by color value/saturation is the same as that represented by size (making this a redundant symbolization).

In addition to size and saturation/value, alpha (opacity) could also be used to represent a hex attribute (see the bottom of this example page for a value-by-alpha representation of density above a Google map).

Implementation

As noted above, hexbins have been implemented in a few statistical packages, including R. But I haven’t seen any other implementations, and certainly not a client-side one. At first I tried to just port the R code, but it made no sense to me, and included many dependencies within R. So I decided I’d have to roll my own. Rolling my own seemed really hard, so luckily I ran into Alex Tingle’s libhex library. Though certainly not designed for hex-binning (I believe it was made with game developers in mind), this great library has all the methods necessary to create a hexagonal lattice data structure. And though written in C++, the author had completed an experimental JavaScript version.

It took some back-and-forth with libhex’s author Alex to figure it out, but the library’s methods make it easy to create a hexagonal lattice or grid of a given size with specified hexagon size. Once created, the Grid.Hex method can be used to determine corresponding hexes for each 2D point in the dataset to be binned. After this is achieved, we have a hexagonal lattice data structure, with each hex in the grid storing the points contained within its data space.

This creates the data structure, and performs the necessary binning routine for each point, but the library wasn’t meant to render anything. I therefore paired it with my favorite data-driven visualization (or document-manipulation) library, D3.js. The result is d3.hexbin.js, which can be used like so:

The result returned by d3.layout.hexbin() — hexset in the above — is simply an array of hex objects with important properties — notably data (the binned points for the particular hex) and pointString (a string representing the outline points of the hex). As far as symbolization, once the hexbinning routine is completed, representing the data with multiple symbologies is quite easy with D3. The example posted here shows off the exact same random data represented with dots, choropleth, proportional symbol, bivariate, and value-by-alpha symbologies. The code below is used to render the frequency hexgrid as a choropleth.

All the code is stored in the hexbin-js Github repository. Please browse the src and tests folders to see more of what’s going on here.

Because I’m a cartographer (or something), I wanted to create a geographic proof-of-concept for this method. I came up with this, combining my custom hexbin layout class with D3.js and Polymaps. The resultant interactive visualization shows an overview + focus view of all Walmarts in the USA. Hexes can be moused over for a focus view.

d3.layout.hexbin requires D3.js, though the dependencies don’t go that deep, so a few quick mods would allow you to use the hexbinning methods with any JavaScript mapping or graphics library. Use as you will. Many thanks to both Alex Tingle and Mike Bostock for answering my questions.

The great Buckminster Fuller created a series of Dymaxion maps utilizing various forms of his patented Fuller projection in the 1940s and 50s. The most well-known, icosahedral form of the projection (above) was devised in Raleigh, North Carolina, in 1954. Fuller intended the projection to better balance shape and areal distortion, while also eschewing the north-south cultural bias he saw in common projections.

I’ve seen a few code implementations of Bucky’s design over the years, including the Perl scripts Schuyler Erle wrote for his touchstone Mapping Hacks. Erle’s modules were based on Robert Gray’s foundational work in determining the appropriate transformation equations which were then incorporated into C source code. But I hadn’t seen a client-side implementation until I saw this map in the examples section of Jeff Heer and Mike Bostock’s excellent JavaScript visualization framework Protovis. In this post I just show how their JavaScript Dymaxion code can be brought into OpenLayers as a custom projection.

Since Buckminster Fuller, Robert Gray, and Mike Bostock have already done all the hard work, adding the projection to OpenLayers is a cinch. But I think it’s worth showing here because there isn’t much info out there on using custom (that is, outside of PROJ.4) projections in OpenLayers. And I’d love to see more online slippy maps using such experimental projections.

OpenLayers implementation

Most web mapping frameworks only display data in the Web Mercator projection. This is basically because of a decision Google made six or seven years ago and because web mapping platforms have been used more for reference than thematic mapping. OpenLayers is unique in allowing coordinate system transforms from any arbitrary projection to any other. Of course, if you’re loading in Google or Bing tiles, you’ll have to stick to Web Mercator for any overlays; in this case OpenLayers will just be transforming your overlay data from lat/long to Mercator for display. But if you’re using all vector data — from KML, GeoJSON, or many other formats — you can take advantage of OpenLayers’ projection abilities. And this is almost always going to involve the Proj4js library, a port of PROJ.4.

Bjørn Sandvik provides a great introduction to projecting KML data with OpenLayers and Proj4js. Proj4js contains most of your old favorites, like Lambert and Albers and Transverse Mercator. But for custom projections like Dymaxion, OpenLayers includes the OpenLayers.Projection.addTransform method, which I’m using like so:

EPSG:4326 in the above method represents the standard WGS 84 lat/long coordinate system. “DYMAX” is an arbitrary string that we’ll use whenever we want to apply the Dymaxion transformation. The convert_s_t_p method is from the dymax.js code included with Protovis and does all the heavy lifting of converting lat/long points to Fuller x-y coordinates. Notice I’m only defining the forward transformation — from lat/long to Fuller. The inverse would be quite difficult but is luckily not necessary for projecting geodata onto a Dymaxion map.

To utilize the defined projection, then, we just have to instantiate an OpenLayers.Projection object with our “DYMAX” projection identifier, and include this as an option when we create our OpenLayers map.

Below’s an image linking to an example of the Protovis Dymaxion code being used within OpenLayers. View source on that page to see the very little code that’s driving the example. The triangles and world countries should load right away in the Fuller projection, but the 3000+ world cities may take a bit.

Next

I’d be remiss if I didn’t mention Mike Migurski’s remarkable work on the “Faumaxion” projection, which resulted in an experimental and path-breaking interactive browser that re-orients and re-configures its equilateral triangular coordinate system based on the map center and scale. Ideally something similar would be possible using OpenLayers and the icosahedral geometry of the Dymaxion projection. But that’s way ahead of me and this post. Please see Mr. Migurski’s posts (I, II, III, and IV) for more information on the Dymaxion transformation and Migurski’s reasons for switching to a gnomonic projection thanks in part to its extant and efficient inverse equation.

I just want to see more and more geographic projections available in web mapping frameworks. An argument can certainly be made that no more than a handful of projections are necessary for the vast majority of reference and thematic mapping purposes. But this leaves out certain artistic and political mapping pursuits that may benefit from more experimental projections like the Dymaxion.

Gene Keyes, a Fuller devotee, has declared a similar but earlier octahedral projection (below) by B.J.S. Cahill superior to Fuller’s (h.t. the Map Room). So next I’d like to see about implementing Cahill’s also-patented “butterfly” projection for vector data in JavaScript. Both Fuller and Cahill are in a class of interrupted projections that are 1) especially difficult to implement for vector data because of section crossings and 2) potentially quite useful for mapping global datasets due to minimized shape/area distortion and the horizontalization of the classic world map projection’s north-south orientation.

Much love to the Buckminster Fuller Institute, the current patent-holders of Fuller’s geographic transformations. And again full credit must go to the Protovis people for their client-side implementation of the Dymaxion/Fuller projection algorithm.

OpenLayers has been around a while, but still performs remarkably well as a slippy map framework while allowing easy thematic map customization. Polymaps is brand new (from Stamen so you know it’s going to blow your mind), but is remarkable for enabling web standards-based thematic customization of geographic layers loaded via GeoJSON or KML onto “vector tiles that are rendered with SVG”.

In this post I show how either OpenLayers or Polymaps can be used to create dynamic and customizable noncontiguous cartograms with very little code.

Idea

The above is a cartogram of state electoral influence from 2007 by the NY Times

I’ve written about these gals before. The form involves resizing features (like states or countries) relative to the units’ attribute values in a given field (often population). Unlike the more common, contiguous form of the cartogram, noncontiguous cartograms don’t attempt to maintain topology, but are therefore free to maintain shape perfectly and experiment with position, as in the above example.

Here’s an example from Judy Olson’s original 1976 article on this cartogram form.

See my older post or Olson’s article for more info on the technique and the theory behind it. Olson produced the above image semi-manually using a projector — each state was projected at a precise scaling factor and then traced. Below I show how to do more or less the same thing, but with JavaScript and either OpenLayers or Polymaps.

Implementation

I wanted to be able to load in any polygonal geodata file (supported by the chosen web mapping framework) and resize the features based on any numerical attribute in order to form a noncontiguous cartogram. The advantage of implementing this within a web mapping framework is obviously that additional data layers from various sources can easily be over or underlain.

As a test and proof of concept for both frameworks, I wanted to reproduce Olson’s graphic (above) as best as I fairly easily could. Olson used 1970 Census data to show the number of people aged 65+ by state; here I’m updating it with estimated 2009 data. Specifically, I’ll be loading this Geocommons data layer uploaded last year.

I’ve been working with OpenLayers for about half a year so I implemented cartograms there first.

OpenLayers

Implementing noncontiguous cartograms in OpenLayers is fairly straightforward, thanks to the helpful methods provided by this comprehensive framework. The first step is loading the geodata.

Load geodata

OpenLayers makes loading geodata quite easy; the library can parse WKT, GML, KML, GeoJSON, GeoRSS, etc. For all we’re gonna use the Layer.Vector class. In this case I’ll load in the KML version from Geocommons, and therefore OpenLayer’s Format.KML parser.

Noncontiguous cartograms don’t require a geographic projection — regardless of the projection of the original linework the features can still be scaled up or down accurately to form the cartogram. So the only reasons for projection are aesthetics and to enhance recognizability of features. I’m unsure of what projection Olson used, but I just went for that old classic, Albers Equal Area. Specifically, I used Proj4js and the following definition:

Proj4js.defs["MY_ALBERS"] = “+proj=aea +lat_1=32 +lat_2=58 +lat_0=45 +lon_0=-97 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs”;

To apply it, I just create a new OpenLayers.Projection which gets applied to the map when it’s instantiated. Thematicmapping.org has more info on projections and OpenLayers.

Unless you already know the maximum value of whatever attribute you’re mapping, you’ll have to loop through them all once before you can loop through them again to scale. Attributes are accessible via the attributes property of each OpenLayers.Feature.Vector (accessible via the features property of the OpenLayers.Layer.Vector).

Scale features

In order to scale a polygonal feature for a noncontiguous cartogram, we must know:

1. the feature’s value for the chosen thematic attribute (see above)
2. the feature’s area and centroid as rendered

   OpenLayers makes these easily accessible. Each feature’s geometry object has getArea and getCentroid methods. As far as I can tell, the getCentroid function returns the true polygonal center of mass, and not just the center of the feature’s bounding box.

3. the feature’s desired area (in pixels) given the maximum area provided and the feature’s value as a percentage of the layer’s maximum value

   desiredArea = ( value / maxValue ) * maxArea;

4. finally, the feature’s scale which is just a function of its original and desired area

   desiredScale = Math.sqrt( desiredArea / originalArea );

   This scale is then applied via the resize method of each feature’s geometry.

   feature.geometry.resize( desiredScale, centroid );

Result

Here’s an image from the example you can find on this page. All source can just be accessed from there.

Hey, that looks pretty great. Michigan’s kinda off-center, but I believe that’s because the polygon is only defined by one ring of coordinates, though it should be a multipolygon. Perhaps more noticeable is the overlap in the Northeast. In Judy Olson’s original example, states were blown up by a visual projector and then traced. But the projector could be aimed before tracing, thus avoiding overlap. In this case I simply scale the states and keep them at their original centroids.

I could avoid overlap by determining appropriate positioning and setting this within OpenLayers (but overlap would be very difficult to determine and then address dynamically) or by significantly reducing the configurable maximum area allowable on the resultant cartogram (but in order to be sure you’re preventing overlap features would have to be scaled quite small, which would detract from the readability of the cartogram).

Polymaps

Polymaps is a fairly new JavaScript mapping library by Stamen and SimpleGeo. Geocommons recently introduced Polymaps to their online mapping service, creating a quite powerful Flash-free online thematic mapping tool. Creating noncontiguous cartograms in Polymaps was a bit tougher than the process detailed above, just because the library is so light-weight.

Load geodata

The first step is quite easy. As far as vector geodata formats, Polymaps only has built-in support for GeoJSON, though they do provide a KML example that takes advantage of an optional fetch method specified in the GeoJSON layer constructor.

But I’ll just go with GeoJSON for this one. I found out in this post from GeoIQ that I can access a GeoJSON version of features in any Geocommons dataset by going to the “features.json” endpoint. So for my 2009 estimated census dataset I’ll be loading in http://geocommons.com/overlays/55629/features.json?geojson=1 using the following simple method:

Note that loading directly from Geocommons only works while developing locally because of cross-domain policy. So in my finished example I end up loading a local version of the JSON.

Polymaps is limited to the Web Mercator projection for display, but we can still produce a passable reproduction of Olson’s original.

As in the OpenLayers example above, unless you already know the maximum value of your attribute, you’ll need to first loop through the features to determine it. In the above code, you can see I’m using the layer’s on method to listen for the “load” event. And in there I can get my features off the event object’s features property. Attributes are stored on each feature’s data.properties property.

Scale features

To scale each feature we must first know it’s value in the chosen attribute (see above). Then we need to determine it’s current area (in pixels) in order to figure the feature’s desired area on the eventual cartogram. OpenLayers provides a convenient method for this but in Polymaps we have to roll our own; for this Mike Bostock (one of the primary authors of Polymaps) was of much help. To calculate the area of each feature I just needed access to the list of projected coordinates (then I could employ the basic technique detailed here). Mr. Bostock pointed me to the pathSegList property of the SVGPathElement interface. The pathSegList exposes a list of path segments with the SVGPathSeg interface. Mike said I could count on these segments being one of types “M” (move to), “L” (line to), or “Z” (end line). With this information I quickly put together a method that should return the projected area of any SVGPathElement that Polymaps may produce.

I could easily create a similar centroid method, but I got lazy and decided to just use the center of each feature’s bounding box (accessible via each feature SVG element’s getBBox method).

The desired area and scale are calculated just as we did above in OpenLayers:

desiredArea = ( value / maxValue ) * maxArea;
desiredScale = Math.sqrt( desiredArea / originalArea );

The scale is then applied via the ‘transform’ attribute of each SVG element; both scale and x-y translation must be defined in the ‘transform’ attribute:

Result

As before, here’s an image captured from the example you can find on this page. You’ll see a bit of the code there, but please ‘view source’ to see all the code and markup.

Aside from the necessary difference of projection, the main thing that stands out is the overlap in the Northeast. I discussed possible ways to avoid this in the OpenLayers example above.

Conclusion

Nothing here is new. I’ve been doing this in Flash for a while — see here and here; and of course Judy Olson was doing it some 35 years ago. But it’s nice to see it working dynamically in a couple of open source, web standards-compliant libraries. Thanks to OpenLayers, Polymaps, and Geocommmons for making it possible!

I’m getting into more canvas and JavaScript for interactive mapping. Much of the Flash/ActionScript work I’ve written or come to rely upon is directly portable to JS/canvas. What’s missing is a sweet RIA framework and IDE for the kind of development Flash and Flex have made possible for years.

Luckily it’s not hard to roll our own interactive web map using web standard technologies. In this post I’m just showing off the basics: dynamically loading geodata, projecting it client-side, and rendering to the canvas element.

Hopefully the above map shows up for you. It’s loaded into this blog post with dynamic KML data, projected using the Proj4js library, and drawn onto HTML’s canvas element using JavaScript. You can check out the P.O.C. on a separate page.

Loading geographic data

It all starts with data. Points, polylines, or polygons — typically defined by latitude/longitude coordinates. Your data may be in a CSV file or in a database. For a simple interactive web map it’s best if it’s in a common GIS file format, like the Shapefile or KML.

These days, it’s not too hard to load a geographic layer on top of a web map — using Google Maps or OpenLayers, say. But since we’re looking down the road to interactivity, custom projections, and thematic mapping, it’s best to roll our own. Luckily, getting the data in is pretty easy.

In ActionScript I would use Edwin van Rijkom’s ESRI SHP parser, my own E00 parser, or some simple custom methods I’ve written to load in KML documents. Tom Carden of Stamen has done some great work porting the AS3 SHP library to JavaScript, with additional classes and methods to allow basic layering, panning, and zooming.

Carden’s classes are great; for demo purposes, and to keep this as lightweight as possible, I’ve just written a quick JavaScript method to grab what I need from a KML document:

You’ll notice a bit of jQuery in there. And you’ll also notice that it grabs only coordinate data and works only for polygons. But it produces an array of feature coordinates, which is an array of ring coordinates, which is an array of lat/long coordinates, which is all we need for the current application.

Projecting geographic data

One of my biggest beefs with the typical online map providers is that they’re all rendered in a Mercator projection. No problem for most purposes (and great for producing those 90 degree road intersections), but not so great for country-level mapping and bad for many thematic mapping pursuits. That’s one reason we’re rolling our own here.

PROJ.4 is a generally sweet projections library, originally written in C by Gerald Evenden then of the USGS. It’s been ported to JavaScript as Proj4js. To use it you just have to define source and a dest objects:

And thereafter you can call

where pt is any object with x and y properties. So all coordinates gathered from the KML above can be run through the Proj4js.transform() method, in this case applying a custom Albers Equal Area projection (proj=aea) for the African continent.

Drawing geographic data on the canvas element

The results of the above can be easily rendered to HTML’s canvas element using JavaScript. I’m used to ActionScript’s Graphics class, and its assorted vector drawing methods. Of course, given the common ECMAScript heritage, the JS methods are nearly identical. So the projected linework is rendered thusly:

That method’s made a bit longer by that bitchin’ drop shadow (sorry Firefox, but you Konqueror folks should be cool). See above, or the P.O.C. on a separate page.

Up next

So far this has been pretty sweet: we’ve loaded coordinate data dynamically, projected it, and drawn it to the canvas element. But it hasn’t exactly lived up to the “interactive” part of the title. Next time I hope to get going on panning and zooming, feature mouse-over, and perhaps even attribute loading and thematic mapping.

French cartographer Jacques Bertin died in Paris on May 3rd. This news has been out on a few English-language lists, but I otherwise hadn’t seen it mentioned, so thought I’d note it here. Bertin’s Semiologie and seven visual variables greatly influenced cartographic and graphic design theory and education over the last 40 years. Sadly out of print for years, his Semiology of Graphics will be reissued in extended form by ESRI Press this November.

photo © pavilion tone

For some more indie maps, check out our gallery. To try it out, just head over to indiemapper.com: you can sign up for a free 30 day trial without entering a credit card; after your trial, indie is just $30/month ($20 academic). Oh, and I guess there’ll be a free version, but it’d be pretty embarrassing if you were caught using that.

A little history

Indiemapper took a long time coming. The seeds were planted in December 2007. I had just discovered Edwin van Rijkom’s AS3 SHP library, which lets you load and draw ESRI shapefiles at run-time in Flash. Using widely available formulae for simple projections like Mercator and Lambert conformal conic I began loading and projecting shapefiles in Flash at run-time pretty quickly. These were heady times, and this seemed pretty cool.

Andrew “Woody” Woodruff joined in and we set off to create a full-fledged thematic mapping tool in Flash. We designed the product for ourselves, honestly, and the cartographers we knew. We hoped it’d be useful to other map-makers, whether casual or professional, who may not need nor want to learn the extensive analytical capabilities of a modern GIS, but do want a multitude of symbology and design options for their geographical data.

We presented a super-early version of indiemapper to MACDAD on May 9, 2008.

As you can see, the basic workflow and trademark indie (#0099cc) blue were already in place.

We had some pretty gnarly styling panels, though; at this point we were just working in Flash and creating all the panels from scratch.

Of course things like getting Master’s degrees, real paying projects, moving, and having actual jobs (however briefly) got in the way, and development on indiemapper didn’t restart for another year or so. Axis Maps (where Andy became a partner in Summer 2008) took up development of indie while I went and did something else for a while. Axis Maps released indieprojector as a preview in May 2009, not realizing it’d be another 11 months before the full thing was ready. I joined the team later in 2009, and have been co-developer (with Andy) since.

Development

Mark and Ben are our static and interaction designers here, with Mark also providing the “learn more” content, drawing from his years of academic cartography experience. Dave is our project manager, marketing guru, and AJAX guy; he created the backend to our user management and sharing systems.

Andy and I both wrote AS3 code and MXML markup, but he was mostly focused on the former with me working more on the latter. This meant I programmed more of the framework and UI, while Andy was rocking the math-heavy projections work and all the exporting/imp/svg stuff.

When I joined the company, I immediately set to work refactoring the indiemapper code base to incorporate the MVC framework Mate. Mate, as they say, is “a tag-based, event-driven Flex framework”. I had to use Cairngorm for work a while back, and by comparison Mate is quite lightweight and unobtrusive. There’s much more to say here, but I’ll save that for later.

Though it’s old school what with FXG, I still really like Degrafa, and used it a fair amount for skinning. Aside from Mate, Degrafa, and a few open source Flex components, we pretty much wrote our own little AS3 GIS SDK.

This is just the beginning

Given our platform and development philosophy, we can quickly respond to our users’ needs in a thematic and reference mapping tool. Please let us know what you want.

I think our first goals are:

• performance improvements so you can load larger geodata files faster
• attribute editing and joining
• more charting options for your data as an aid to classification and symbology selection
• more symbologies, like chorodot and additional cartogram styles
• custom choropleth color schemes and graduated symbol size schemes
• line generalization

But let us know what else you’d like to see. We’ve already been able to respond to a few new feature requests and, oh, maybe one or two bugs in our first week.

Many aspiring social cartographers of the last few decades (including myself) drew inspiration from the legend of William Wheeler Bunge, Jr. Unfortunately, little information about this geographic and cartographic pioneer exists online. Below’s a biography of the radical cartographer and anti-academic, “Wild Bill” Bunge.

Mini bio

There are unfortunately few sources of biographical information on William Bunge. Here, I rely on the autobiographical first chapter (”Preface and Acknowledgements: Rethinking”) to Bunge’s last published book, the Nuclear War Atlas (1988); UCSB professor Michael Goodchild’s (2008) review [pdf] of Bunge’s (1962) Theoretical Geography; many of Bunge’s articles (see “Further reading” below); and a handful of secondary sources.

Early career

At the start of the Korean War in 1950, a 22-year old conscripted Bunge was teaching atomic warfare at Camp McCoy, Wisconsin. He completed his Masters degree in Geography in 1955 at the University of Wisconsin (natch), where he was influenced by Richard Hartshorne and Arthur Robinson. Establishing a pattern to be repeated throughout his turbulent academic career, Bunge was rejected by Wisconsin and continued his PhD studies at the University of Washington. There, Bunge and fellow grad students Richard Morrill and Waldo Tobler were influenced by the quantitative geographer William Garrison.

Interestingly, this was also the height of the University of Washington’s cartography program. The program led by John Sherman and Donald Hudson was then rivaled only by the University of Wisconsin. Chapter 2 of Slocum et al’s cartography text describes the era well.

Bunge completed his PhD in 1960; his dissertation would become the touchstone in quantitative geography, Theoretical Geography.

Theoretical Geography and the spatial-quantitative revolution

In a 2001 retrospective on the classics of human geography, Kevin Cox wrote that Theoretical Geography is “perhaps the seminal text of the spatial-quantitative revolution” and that (speaking of the broader field of human geography) “if we want to see where we have come from, what our intellectual debts are, there are few better places to start than Theoretical Geography.” Bunge’s work promotes geography as a science and mathematics as the most fruitful language and tool for its study. As the title makes clear, the author was concerned with theory, and believed that simple laws were discoverable about the patterns of social phenomena found on the earth’s surface.

In part, this was a reaction against the idiographic perspective then present in the discipline. Idiographic methods are concerned with describing the infinite variation in these social phenomena rather than discovering generalizable laws common to the entire surface. Bunge thought such an idiographic view would continue to marginalize geography as a science, but received much opposition from geographers who valued the traditional role of description in geographic practice. Later opposition formed against Bunge’s conflation of geometric pattern with explanation; mathematical functions and simple geometric patters couldn’t, in and of themselves, be said to explain anything.

The ideas contained within are too complex and far outside my areas of expertise to cover here; for a better summary of the issues and debates involved, see Michael Goodchild’s 2008 review (pdf). Though his book would become a classic, Bunge had a hard time getting it published stateside, and apparently Torsten Hägerstrand had a hand in its eventual publication by Swedish (”that freer place”) company Gleerup in 1962. Before this, but with his University of Washington PhD in hand, Bunge received his first academic appointment at the University of Iowa in 1960. By 1961, he’d been fired. The next year, with his book published, the activist/academic Bunge moved to the Detroit neighborhood of Fitzgerald to join the Geography Department at Wayne State University.

Detroit: Fitzgerald and the Detroit Geographical Expedition and Institute

Fitzgerald: Geography of a Revolution was published in 1971, a year after Bunge’s infamous Detroit Geographical Expedition and Institute (DGEI) lost the support of Michigan State University. But it was written in 1967, the year before Bunge formed the DGEI, so will be covered first.

Fitzgerald is an experimental work of urban geography, and one of the most impressive scholarly works I’ve seen. The delay in publication was due to the book’s odd size (23 x 29 cm), format (text, photos, and maps of divergent scale and symbology) and content (very critical of the pervasive racism Bunge seemed to find everywhere). Bunge describes Fitzgerald thusly:

Fitzgerald: The Geography of a Revolution is a humanist geography, describing Fitzgerald, a community in Detroit. The book is science: its data are maps, graphics, photographs, and the words of people. But the book also makes a value judgment — the desirability of human survival — and thus transforms itself into a steel-hard hammer of humanism.

Fitzgerald’s history is traced from the first white settlers arriving in 1816 to the racial tension and revolution Bunge saw taking place around him in the 1960s.

Much of Bunge’s cartographic theory is contained in the foreword to the book. Speaking of a historical farm map created for the book (portion above):

Maps attempt to integrate over time, that is, maps assume an average span of time. This means that nothing that moves is mapped, and therefore property is inherently preferred over humans…In order to restore truth to the map it is necessary to achieve a fiction of accuracy through an assumption, namely that the map is drawn at an exact instant of time. In this case, the time is June 20, 1915 at 2 p.m. on a sunny day. This fiction freezes the men and horses on the roads, the strawberry pickers in the fields, as well as the crops in rotation and the animals in pasture. This restores life to the dead map of property.

Bunge wasn’t a passive observer of the revolution taking place in Fitzgerald. He was an active member of the Fitzgerald Community Council and developed deep connections in the neighborhood; this laid the groundwork for the Detroit Geographical Expedition he would later found (more below). Here, Bunge at a block club meeting in his Fitzgerald home:

And Bunge in Fitzgerald doesn’t merely describe; he advocates. Here, Bunge on cannabis:

The confusion between marijuana and heroin and other hard drugs seems self-serving on the white adult society. Marijuana grows so easily and abundantly that the apparatus of provision is uncomplicated. It is almost like air, a free resource. Further, unlike alcohol, marijuana seems to produce no aggressive outburst, judging from the teenage dances where the odor in the men’s room indicates its use. It has been argued that marijuana leads to heroin and other hard drugs, but cause and effect in this case is murky since baby’s milk also leads to heroin in the sense that it always precedes it.

The above must smack of the idiography Bunge opposed with Theoretical Geography. Bunge tried to preempt such criticism by insisting on the “disciplined objectivity” of Fitzgerald and the generalizability of the story:

Another major technical difficulty is the generalizability of the story. What can we learn about America from studying a core region of only one square mile? At first it was thought that especially the historic geography would be very spotty and unrepresentative of America, but discovery after discovery gradually reversed this apprehension. Who could possibly believe that this region was typical of all America? Would one square mile in the middle of Cincinnati or Miami turn up Indians, land speculators, gypsies black pioneers and so forth? Yes, if it were studied deeply enough.

Fitzgerald’s reception at the time wasn’t great. Bunge attributed all negative responses to racism and entrenched conservative attitudes within academic geography at the time. Legitimate criticism actually centered on the experimental method employed, Bunge’s generalizations of white racism, and the conclusions drawn from a square mile study area. Further, Bunge’s loving but at times simplistic descriptions of “black culture” would now appear politically incorrect or as unfounded/inaccurate as any racialist descriptions.

Detroit Geographical Expedition and Institute

Besides Theoretical Geography, Bunge should be most well known for the radical mapping + educational mission undertaken in downtown Detroit between 1968-1970 under the name Detroit Geographical Expedition and Institute. Bunge formed the DGEI with a poor 18-year old resident of Fitzgerald, Gwendolyn Warren (below at 16, from Fitzgerald).

Variously affiliated with the University of Michigan, Michigan State University, and Wayne State University, the Expedition attempted and at times succeeded in providing free college courses to young inner-city Detroit residents. Bunge wanted to do research in the black community while also teaching the skills necessary for them to conduct research for themselves. All volunteer faculty were used, and the Expedition was generally successful in attracting experts from across the U.S. to teach courses at facilities freely provided on Wayne State University’s Detroit campus.

Classes focused on geography and geographic skills. Two courses — Cartography and Geographical Aspects of Urban Planning — provided the context for perhaps the Expedition’s greatest achievement: A Report to the Parents of Detroit on School Decentralization [pdf] (1970). Expedition participant and Geography professor Ronald Horvath describes the relevance of cartography to the students:

The material covered just did not seem terribly important to the students. Before the request came in to do the decentralization study, a lot of effort had to be spent shoring up the morale of the students, who had real difficulties just showing up to even free classes — some came hungry, others couldn’t afford bus fare, one student had been living in a car for five weeks. Learning how to make a clean line, lay a rip-a-tone pattern, or design a map with the right Combination of point, area, and line symbols did not seem to be critical knowledge to members of a survival culture. But the school decentralization study made sense. The next three weeks both saved and came to define the potential of the Expedition.

The decentralization report — rich in graphs and maps created by Bunge and the Expedition’s students — was adopted by a community group and forced the Board of Education to respond to charges that its school districting plans were illegal. The Expedition released a few other documents using cartographic experimentation as a weapon of social justice, including the “Geography of the Children of Detroit”. At its height in the Spring of 1970 the Expedition enrolled nearly 500 inner-city students in 11 different courses. By that fall, zero courses were being taught and the Expedition was effectively over, having lost the support of Michigan State University.

Leaving the U.S.

Below you’ll see Bunge’s name on part of an infamous listing of 65 “radical” speakers compiled in 1970 by U.S. Representative Richard H. Ichord, then chairman of the House Un-American Activities Committee. This blacklist was the subject of much controversy and a federal court order actually prohibited official government publication of the names of these anti-war protesters and/or open communists.

After his brief (1960-61) stint at the University of Iowa, Bunge was employed for the Fitzgerald and early DGEI days by Wayne State University (1962-69). He was fired from Wayne State University when his attempts to draw black geographers to the department rankled administrators. Unemployment allowed Bunge to travel to campuses in the U.S., Canada, and Britain on his “have map, will travel” campaign. He used an overhead projector to show “peace maps” as a protest against U.S. militarism (these would evolve into the Nuclear War Atlas; see below). Bunge’s speeches during this period drew the attention of Representative Ichord, and the resulting blacklist made Bunge basically unemployable in U.S. academia.

Bunge moved to Canada and had two more brief stints in academia: at the University of Western Ontario (1970-71) and York University (1972-73). This period was Bunge’s most prolific with regard to non-book publication: I count 12 single-author pubs between 1970 and 1974. In this period, Bunge formed a few short-lived expeditions on the Detroit model: the Society for Human Exploration (1971-72), Toronto Geographical Expedition (1972-73), and the Canadian-American Geographical Expedition. Bunge touted such expeditions as the highest calling for the geographer.

I’ve barely done justice to the history, theory, and impact of these urban expeditions. I recommend seeking out the primary and secondary material on the period (see “Further reading” below), particularly Ronald Horvath’s “The ‘Detroit Geographical Expedition and Institute’ Experience”, Bunge’s “The First Years of the Detroit Geographical Expedition: A Personal Report”, and the decentralization study linked above.

Later in the decade, now outside both Canadian and American academia, Bunge would become a cab driver in Quebec. Though an odd turn for such an influential geographer, Bunge had previously compared cab drivers glowingly to the native guides who led explorers across the Americas and Africa. Bunge had elsewhere praised cabbies: the “regions within cities are better known by cab drivers than by ‘urban geographers’”. Bunge lived in Arthabaska, Quebec from some time in the late 70s to some time in the early oughts.

The 80s and the Nuclear War Atlas

William Bunge was published thrice in the 1980s: one article (correction: found another article, though it was originally submitted in the late 70s), one epilogue, and one book. The book, Bunge’s latest, was also his most experimental and map-heavy work. The intro contains a limited biography of the man himself. Further chapters include remixes of his previous works, copious maps (see “Maps” section below), and Bunge’s ruminations on the potential destructiveness of U.S. and Soviet nuclear power.

The atlas started as a poster (from Martin Dodge’s blog):

In the appendix, Bunge called Geography the “Queen of the Peace Sciences”:

Interestingly, geography, a subject currently in low academic status, dying out in one university after another, can actually make a serious claim to be the ‘queen of the peace sciences’ — not out of our innocence, but rather out of our guilt. It is the quintessential war science. This might account for its decline. Today, who needs more expertise on how to kill people?

The Nuclear War Atlas is a significant geographic and cartographic work. Again, I do it little justice. The atlas may have had more traction had the wall not fallen a year after its publication, but the maps and text within are still necessary reading for any radical geographer or social cartographer.

Back to the USSR

Since the Nuclear War Atlas little has been heard from William Bunge. Nothing was published in the decade until 1998. By this time Bunge’s social liberalism seemed to be verging on Stalinism. His latest published article (that I know of) — 1998’s “Where are the Germans?” — was printed in Northstar Compass, the journal unabashedly dedicated to the re-establishment of the Soviet Union as a socialist state. I can’t find the text of the article (it’s not included in Northstar’s archives for the issue) but its publication was noted in a Spring 1999 edition of MADGEOGNEWS [pdf].

The same article notes that Bunge “was awarded the ‘Representative of the Parti communiste du Québec to the Federal government’ in 1998″.

A 2001 letter also contained a bit of revisionist Stalinism. The below was included in some discussion on a World Congress for Solidarity and Friendship with the Soviet People page.

We have a lot of basics in common. We remember and respect the fact that under the brilliant leadership of Joseph Stalin the Soviet Union practically single handedly defeated Hitler. Almost ninety per cent of all the military fatalities sustained by Hitler’s Nazi hordes in World War II were rendered by the Soviets, leaving but ten per cent for all the other “allies.” Many Western war veterans were saved by the defeat of the fascists by the Soviet Red Army.
We are also enthusiastic about the restoration of the USSR since its collapse had practically collapsed most of the left movement worldwide. Philosophically there would be no understanding of even pre-Leninist works, Marx and Engels, without the Soviet press and its publishing of all their works in many languages of the world.
At the World Congress which I shall attend I will try to bring the following question to discussion: “How does religion differ in Fidel Castro’s Socialist Cuba compared to Stalin’s Socialist Soviet Union?”

Certainly Bunge always leaned towards Marx — his later Stalinist leanings should by no means detract from his 30+ years of service to the downtrodden of America, those who’d been failed by the state supposedly dedicated to serving them. Bunge is alive and (I hope quite) well, and I regret missing this document distributed at the 2008 AAG conference in Boston, at which Bunge and I were both rumored to be in attendance.

Maps

But what the hell do I really care about?– maps. Here’s a gallery of works of his I’ve scanned from books and articles or found online.

From Professor Krygier’s Making Maps blog: “Redrawn from William Bunge, The Continents and Islands of Mankind. Areas in black have more than 30 people per square mile. Reproduced from Making Maps, p. 160-161″

Fitzgerald and the Detroit Geographical Expedition

Bunge’s Fitzgerald: Geography of a Revolution and the output of the Detroit Geographic Expedition (see bio above) included some of Bunge’s most experimental and powerful maps of Detroit.

A simple map I scanned from Fitzgerald

The above three maps were published last December in what I can only assume is [translated here] an excellent post on Bunge’s work in Detroit: William Bunge, le géographe révolutionnaire de Detroit.

Another example of Bunge’s cartographic experimentation: a rectangular cartogram when the form was quite rare. An image I clipped from the DGEI’s “A report to the parents of Detroit on school decentralization” [pdf]“

This map is from Fitzgerald, but I snagged it from a post on Krygier’s blog

Another map from the DGEI, this time scanned from an ESRI proceedings paper. I can’t make out all the map symbols, but some are dogs, cats, rubbish, gym equipment, bicycles, telephone poles, and broken bottles.

Nuclear War Atlas

Bunge’s Nuclear War Atlas is perhaps his most important cartographic work. Indeed, it is his only atlas (his Atlas of Love and Hate was never realized, not by Bunge anyway). The mostly duotone (red and black) maps contained therein display more cartographic experimentation than any of his previous works. There’s also some pretty weird shit. Bunge notes in the preface:

The color red is used throughout the atlas on the maps to depict death, and green life. This atlas is awash in red as our planet might soon be in death. Hopefully, at last my fellow revolutionaries will show some keen interest in conducting revolution without annihilation.

I had to search quite a bit to find any maps containing green (life).

Here’s a sampling of nine maps I scanned from the atlas, complete with original captions. Bunge’s work contains many redesigns of maps previously included in Fitzgerald or DGEI publications (for example, the “Region of rat-bitten babies” map below).

Someone helpfully pointed out to me that (as the source indicates) the above is actually reprinted by Bunge from Ronald Horvath’s (1974) article “Machine Space”

Influence

Bunge’s concept of the Expedition was very influential in geography in the 1970s. Unfortunately, the influence didn’t last long and there have only been minor resurgences since. Still, a small group of radical geographers — particularly those associated with the Antipode journal — have carried on the revolutionary spirit of Bunge’s geography.

Bunge is certainly an influence on academic John Krygier and anti-academic Denis Wood. The former has mentioned Bunge a few times on his blog and his definitional work on maps as propositions (see the sweet Krygier/Wood comic, Ce n’est pas le monde [pdf]) is inspired by Bunge’s advocacy maps of the 1960s. Wood too was influenced by the Detroit Geographical Expedition; his as yet uncompleted Narrative Atlas of Boylan Heights is directly influenced by Bunge in terms of scale, subject matter, and cartographic technique.

I am personally not as convinced as Bunge as to the state’s ability to solve the very real problems about which he writes and maps; and I just can’t get down with his more recent Stalinist leanings. I admire William Bunge primarily as a social cartographer willing to experiment with symbology and as a geographer willing to stand up for his political principles. Ultimately the latter led to him having no place in American academe. This is unfortunate, for his experimental cartography and radical geography writings could have had a much greater impact on critical cartography, public participation GIS (PPGIS), and human geography.

Further reading

By Bunge

Books

• Theoretical Geography. Lund, Sweden: Gleerup. (1962)
• Fitzgerald: Geography of a Revolution. Cambridge, Mass.: Schenkman Pub. Co. (1971)
• Nuclear War Atlas. New York, NY: Basil Blackwell Inc. (1988)

Journal articles and chapters

Bunge certainly shouldn’t be judged by his peer-reviewed scholarly output; in many ways he was an anti-academic who preferred action to being published. Nonetheless, here are all the published Bunge articles or chapters I could find. Links provided are occasionally to full-text content, but most are to references on JStor, OpenLibrary, and similar sources. I throw in a quote or an abstract here and there.

• (with Reid A. Bryson) “Ice on Wisconsin Lakes” (1956) Published by University of Wisconsin Dept. of Meteorology
• “Patterns of Location” [pdf] (1964) Discussion paper of the Michigan Inter-University Community of Mathematical Geographers, no. 3
• “Geographical Dialectics” (1964) Professional Geographer 16, pp. 28-29
• “Racism in Geography” (1965) The Crisis (NAACP magazine) October, pp. 494-497
• “Locations Are Not Unique” (1966) Annals of the Association of American Geographers 56, pp. 375-376
• “Gerrymandering, Geography, and Grouping” (1966) Geographical Review 56, pp. 256-263
• “Fred K. Schaefer and the Science of Geography” (1968) Harvard Papers in Theoretical Geography, Special Papers Series, Paper A
• “The First Years of the Detroit Geographical Expedition: A Personal Report” (1969) field notes, discussion paper no. 1, pp. 1-59
• “A report to the parents of Detroit on school decentralization” [pdf] (1970) Detroit Geographical Expedition and Institute
• “Geography of the Children of Detroit” (1971) field notes, discussion paper no. 3
• “The Geography” (1973) Professional Geographer 25, pp. 331-337
• “The Geography of Human Survival” (1973) Annals of the Association of American Geographers 63, pp. 275-295
• “Ethics and logic in geography” (1973) In R. J. Chorley (ed.), Directions in Geography, London: Methuen, pp. 317-31
• (with Robert Sack) “Spatial Prediction” (1973) Annals of the Association of American Geographers 63, pp. 566-569
• “Urban Nationalism: An Example from Canada” (1973) La Revue de Geographie deMontreal 27
• “Exploration in Guadeloupe: Region of the Future” (1973) Antipode 5, no. 2, pp. 67-73
• “Regions Are Sort of Unique” (1974) Area 6, no. 2, pp. 92-99
• (with Donald W. Fryer) “A Geographer’s Inhumanity to Man” (1974) Annals of the Association of American Geographers 64, no. 3, pp. 479-484
• “Practical Applications of Theoretical Geography” (1974) Published by the University of Iowa Dept. of Geography
• “Fitzgerald from a Distance” (1974) Annals of the Association of American Geographers 64, no. 3: pp. 485-489
• ( with R. Bordessa) “The Canadian alternative : survival, expeditions and urban change” (1975) Published by the Dept. of Geography, Atkinson College, Toronto
• “The Point of Reproduction: A Second Front” (1977) Antipode 9, no. 2, pp. 60-76
• (with John D. Nystuen) “The Philosophy of Maps” [pdf] (1978) Michigan Inter-University Community of Mathematical Geographers, Discussion Paper no. 12
• “Perspective on Theoretical Geography“ (1979) Annals of the Association of American Geographers 69, no. 1: pp. 196-174
• “The Cave of Coulibistrie” (1983; originally submitted 1978) Political Geography Quarterly 2, no. 1: pp. 57-70

  Geography and politics are intertwined in a study of a single small Caribbean settlement, Coulibistrie, on the windward island of Dominica. The sense of the place is provided through a sympathetic description of its rhythms, its people, their reactions to their poverty and their survival strategies. Political movements from Dreadism to Socialism are discussed in this specific context, and the position of women and children analysed. Political strategies are evaluated and the conclusion proposes a pro-children dialectical experiment of allying Marxism with the Catholic Church.

• “Geography is a field subject” (1983) Area 15, no. 3: pp. 209
• “Epilogue: Our Planet is Big Enough for Peace but Too Small for War” (1986) in R. J. Johnson and P.J. Taylor (ed.) A World in Crisis?: Geographical Perspectives, Oxford: Basil Blackwell
• “Where are the Germans?” (1998) Northstar Compass 7, no. 6
• “Author’s response: geography the innocent science – a completed geography
  awaiting its birth in print” (2001) Progress in Human Geography 25, no. 1, pp. 75-77

  So what is the state of geography today? It is in a mess – hyphenated, obfuscated, as confused as it is confusing. Why? Society is itself degenerating. The culture is coarse, vulgar, prostituted, chaotic, ‘dummied down’. We are in desperate need of intellectual reinforcements, and geography can help some.

Letters to the editor

• “A Geological Decision” (1962) Iowa Defender (Iowa City underground newspaper, 1959-1970), 5 January, 1, 3, 4
• “When to Organize” (1965) New York Times, 27 June, E11
• “Soviet Consumption” (1965) New York Times, 18 August, pp. 34

By others

Bunge has been covered in many divergent sources — below are just a few.

Articles

• Ronald J. Horvath (1971) “The ‘Detroit Geographical Expedition and Institute’ Experience”. Antipode 3, 1, 1
• Richard Peet (1977) “The development of the radical geography in the United States” in R. Peet (dir.) Radical Geography, alternatives viewpoints on contemporary social issues. Chicago: Maaroufa Press
• A. Merrifield (1995) “Situated Knowledge through Exploration: Reflections on Bunge’s ‘Geographical Expeditions’”. Antipode 27, no. 1, pp. 49-70
• K.R. Cox (2001) “Classics in human geography revisited: Bunge, W., Theoretical Geography. Commentary 1.” Progress in Human Geography 25, no. 1, pp. 71-73
• M.F. Goodchild (2008) “William Bunge’s Theoretical Geography” [pdf]. In P. Hubbard, R. Kitchin, and G. Valentine, editors, Key Texts in Human Geography. Los Angeles: SAGE, pp. 9–16. [450]

Blog posts

• Cyber Badger Research Blog (by Martin Dodge): “William Bunge’s Nuclear War Atlas“ (October 2006)
• New Maps of Ulster: “William Bunge” (June 2008)
• John Krygier’s Making Maps blog: “Making Advocacy & Humanitarian Maps” (June 2009)
• Le Monde diplomatique: “William Bunge, le géographe révolutionnaire de Detroit“ (December 2009)

For a while now, I’ve wanted to build geographic topology in Flash. Topology, as described in an ESRI white paper, is

a set of rules and behaviors that model how points, lines, and polygons share geometry. For example, adjacent features, such as two counties, will share a common edge.

For the applications I’ve had in mind, polygonal or areal topology is all that’s required: I need to know which features share a common border with which features. As a bonus, it’d be nice to know how long a border they share (how contiguous are they?).

Described further down is a raster method to determine vector feature adjacency. First, though, I’ll cover why such information must be built in the first place and how it is useful for certain cartographic applications.

Application to cartography and visualization

Topology needs to be built because it is not encoded in the most popular vector GIS formats (KML and the shapefile). In these formats, features (states or counties perhaps) are all stored separately; redundant points (like the shared corner of the “four corners” states) are repeated. There are topological GIS formats, like Arc/Info Export (e00), but geospatial data are rarely distributed in such formats.

One potential use for topological information is graph decomposition. Dasgupta et al write in Algorithms:

A wide range of problems can be expressed with clarity and precision in the concise pictorial language of graphs. For instance, consider the task of coloring a political map. What is the minimum number of colors needed, with the obvious restriction that neighboring countries should have different colors? One of the difficulties in attacking this problem is that the map itself, even a stripped-down version like Figure 3.1(a), is usually cluttered with irrelevant information: intricate boundaries, border posts where three or more countries meet, open seas, and meandering rivers. Such distractions are absent from the mathematical object of Figure 3.1(b), a graph with one vertex for each country (1 is Brazil, 11 is Argentina) and edges between neighbors. It contains exactly the information needed for coloring, and nothing more.

The simple graph above is two steps away from a circular cartogram of the form popularized by Daniel Dorling. On such maps, 1) feature circles are sized according to some numeric attribute, and neighbors — instead of being connected by lines — are 2) iteratively moved together or apart so that adjacencies are maintained where possible while avoiding circle overlap. The circular cartogram below is a snapshot of a NY Times interactive app developed in part by Lee Byron.

In addition to knowing the neighbors of all features, Daniel Dorling’s original algorithm requires as input the shared border lengths of all contiguous features. These are used in the force-repulsion algorithm — while attempting to maintain all feature adjacencies, Dorling’s algorithm applies extra attraction forces to features that share relatively longer borders.

In cartography, topology has much value beyond that described above. Generalization immediately comes to mind; to generalize/simplify/smooth the outline of a polygonal feature, one must also consider the feature’s neighbors. If the cartographer fails to do so, gaps may be created where features previously neatly adjoined. That noted, I should say that the method described here — while quite accurate in evaluating adjacencies — can only determine adjacency and relative (pixel-based) feature overlap, whereas polygonal shapefile generalization necessitates a true (and computationally intensive) topological indexing of each and every coordinate in the dataset. More on this later.

Method

Features stored in KML and shapefiles are defined by a series of latitude-longitude coordinates. The brute force method of determining if two features are topological neighbors would be to loop through their coordinates searching for an exact match. Not only would this be quite computationally intensive, but it wouldn’t detect true neighbors that were digitized independently; a shared border does not necessarily mean that the two features are defined using the exact same control points.

Of course it can be done. Most GIS software today will accurately build topology from a non-topological data source. The NY Times’ Matt Bloch detailed a server-side method in his Wisconsin (natch) Cartography MS thesis (as well as a 2006 AUTOCARTO proceedings paper), used in his MapShaper app, for essentially converting a polygonal shapefile to a non-redundant polyline shapefile. Though more efficient than simple brute force, these applications still rely on algorithms that require a large number of computations, and this scales up quickly as features get more complex. This is why topology is always built server-side.

The method I settled on is similar to pixel-based collision detection (also called “pro pixel collision” or “pixel-perfect collision”) familiar to game developers. In Flash, hitTests are only possible with specific points. To test for overlap of complex polygonal features, game developers have often relied on a pixel-level bitmap test for overlap. As described in an article by Troy Gilbert,

It’s pretty straightforward: you render two display objects to separate color channels, combine the color channels, then search the resulting image for any overlapping color.

I first encountered the technique in a post by Grant Skinner describing a method for shape-based collision detection in Flash published in 2005. GSkinner’s method doesn’t work as is in detecting adjacency in geographic features drawn from shapefiles. But with a few additions, the method is quite accurate and efficient in detecting feature neighbors in real-time. Try it out:

Some code

This isn’t really fully developed. It’s just something I’ve been thinking about for a while and wanted to get out there. Here though is a class I wrote to perform this pixel-based adjacency testing, as used in the above demo. It contains two chief public static methods:

• getNeighborsForFeature(): Returns a Vector of DisplayObject features determined to be neighbors of the passed-in feature (from a passed-in Vector of all features)
• checkFeatureAdjacency(): Checks the two passed-in DisplayObject features for adjacency. Returns the number of overlapping pixels.

How it works

To test for adjacency, features are drawn to a bitmap. The second feature is overlain using the difference blend mode. Any pixels shared by both features will now be lighter than before; I can check for such pixels using the BitmapData.threshold() method.

Adjacent features, though, will only overlap if they’ve been drawn with an external stroke. The two methods above accept a strokeWidth parameter. If this is less than 2 (features with external strokes of 1 sometimes fail to detect overlap accurately), I apply a precise GlowFilter to each raster. This increases accuracy but affects performance; though it’s not necessary, the methods perform best when features are initially drawn with a 2px stroke (as in the demo above).

Limitations

Accuracy

This method is quite accurate for most realistic geographies. But of course it’s all dependent on 1) the scale and complexity of your data and 2) the size of the BitmapData instance used for testing. One particular area of concern is features that share a corner but no actual border line segments. In some applications, these should be considered neighbors; in others, not. With a large enough BitmapData, such adjacencies will be detected.

If such features should not be considered neighbors in your application, a threshold may be set. checkFeatureAdjacency() returns the number of overlapping pixels; if this number is sufficiently low, features can be considered non-adjacent.

Performance

I haven’t done any real performance tests, but the method works fine, in a test with the 3000+ U.S. counties drawn from a large-scale shapefile in Firefox on my MacBook; neighbor detection was detected in real-time and nothing was cached.

As noted above, the methods perform fastest when features are initially drawn with a 2px stroke. If the methods are to be called repeatedly, it’s best to pass in shared BitmapData instances to be used for testing; the larger the BitmapData instance, the greater the accuracy, though this is offset by increased processing time for the BitmapData instance methods. No matter what you pass in, though, this raster-based method is far faster than any true coordinate-based adjacency testing algorithm (important b/c it is being performed client-side).

Generalization

This method simply doesn’t work for generalization (simplification or smoothing of feature border linework). Such processes require knowledge of all shared line segments, necessitating true coordinate-based topology building; my method only returns the number of overlapping pixels, which only correlates with actual shared border length (this, though, is sufficient information for the Dorling circular cartogram algorithm).

But I hope it’s useful for at least a few visualization applications. True topological indexing is best; but this computationally intensive process cannot yet be performed client-side in Flash. I’ll be working with these methods in the future, most likely in an implementation of Dorling’s circular cartograms in indiemapper.

The six symbologies are the classic thematic cartography representation methods: choropleth, proportional symbol, dot density, flow, isarithmic, and cartogram. Borden Dent’s great cartography textbook, in the section titled “Techniques of Quantitative Thematic Mapping”, dedicates a chapter to each of these symbologies, and to no others. The classic Robinson textbook, as well as the modern Slocum et al one, also dedicate more space to these six representation methods than to any others.

isoline

The first isarithmic (representation of continuous phenomena using lines of equal value) map is often ascribed to Edwin Halley, with his 1701 isogonic contour maps of magnetic declination.

Not so, as the symbology has been traced back to as early as 1584. Robinson notes in Early Thematic Mapping:

The contour had tentative beginnings as early as the end of the sixteenth centruly in the form of lines of equal depth on a map of the River Spaarne made in 1584 by the Dutch surveyor Pieter Bruinsz. The next use of the symbol came more than a hundred years later in 1697 by Pierre Ancellin…

You can’t see too much in the above — a terrible scan I made from Robinson’s Early Thematic Mapping. This map isn’t listed on Milestones, nor could I find any reproductions of Bruinsz’s map on the internet. What I did find was a detail image of unknown provenance on the interesting site, Dutch thematic maps on the web.

On the above you can clearly see the dashed bathymetric line of equal depth.

choropleth

Frenchman Charles Dupin’s (1826) Carte figurative de l’instruction populaire de la France is the first known choropleth map.

Dupin’s map was and is well known, and had a great impact on cartographers and statisticians at the time. Interestingly, the particular form of Dupin’s choropleth map — the unclassed variety, in which each unique value gets a unique shade — didn’t stick. The classed variety quickly took hold, with the first such map appearing in an 1828 Prussian atlas, Administrativ-Statistischer Atlas vom Preussischen Staatae.

Notice not the subtle lean in my scan (from Robinson since I couldn’t find it elsewhere), but the class breaks shown along the bottom. The author of the thematic portion of the atlas is unknown.

dot density

Dupin’s fellow countryman Frère de Montizon is responsible for the first dot density map, Carte philosophique figurant la population de la France (1830).

Unlike Dupin, who is fairly well known, Robinson describes Montizon as a “mystery man”. He continues,

It is one of the accidents of history that Frère de Montizon’s invention of the thematic dot map should have gone completely unnoticed. In terms of cartographic innovation it ranks with the isothermal map, yet as far as can be ascertained no reference to him or to his dot map was made by anyone well into the twentieth century…this basically simple, logical idea had to wait some thirty years to be reinvented and much longer than that to become generally known.

The symbology was “reinvented” by Thure Alexander von Mentzer in his 1859 map of population distribution in the Scandinavian peninsula. I can’t find any reproductions of this map anywhere.

proportional symbols

The first known example of a proportional symbol map appeared in the Atlas to Accompany Second Report of the Railway Commissioners, Ireland (1837). Though the atlas was apparently quite innovative with regard to thematic cartography, it went largely unnoticed due to limited distribution.

Here, Henry Drury Harness’s map of Irish population density from the atlas.

They’re a bit hard to make out in this horrible scan (again from Robinson — listed as part of his personal collection), but there they are: circles scaled according to population centered at various Irish cities. This wasn’t the first time that proportional circles had been used to convey data, but it was the first time it had been done on a map. Notice the shading?– this is also one of the first dasymetric maps.

flow maps

The following map is more well known, and could share the title of first proportional symbol map, as it appeared in the same 1837 atlas as the above map. Here, the innovation is the use of line thickness to convey a quantitative value, in this case the traffic between Irish cities (again by Henry Drury Harness).

cartogram

I’ve written about this before, so below’s a quick summary.

Many sources, including Dent’s text, point to Émile Levasseur as the originator of the value-by-area cartogram. Levasseur included diagrammatic maps like the following 1868 map of Europe in his economic geography textbooks.

The above map was reprinted by Funkhouser in 1937 and by Waldo Tobler in his Thirty Five Years of Computer Cartograms. In the latter, Tobler notes:

This is a map of the countries of Europe in which each country is represented by a square whose size is proportional to the area of the country, and with countries in their approximately correct position and adjacency. Could this be called an equal area map? Or is it an equal area cartogram?

I believe the former: that this should be considered a diagrammatic equal area map, but not a value-by-area cartogram. Sara Fabrikant makes the case for the German provenance of the first cartogram:

Another notable and early European contribution to the thematic mapper’s toolbox is the value-by-area cartogram. Hermann Haack and H. Wiechel published a cartogram depicting election results from the German Reichstag in 1903 (cited in Eckert 1925).

Haack and Wiechel’s map is indeed cited in Eckert’s famous Die Kartenwissenschaft volumes, but it isn’t reprinted there. Nor is it clear that unit areas on their election maps represented something other than land area. The earliest true value-by-area cartogram that I’ve seen reproduced came by way of Professor John Krygier, who reprinted William Bailey’s 1911 population cartogram.

I doubt the above is truly the first cartogram, and welcome any scans or references to true value-by-area cartograms that precede the 1911 map.

conclusion

Four of the six classic thematic cartography symbologies — choropleth, dot density, proportional symbol, and flow — originated between 1826 and 1837. Two of them — proportional symbol and flow — were initially produced by one man (Harness), and appeared in the same obscure railway atlas. All were refined in the 19th century, and only one (isolines) predate the century.

Conspicuously absent above are the names William Playfair and Joseph Minard. Indeed, some sources still cite these well-known engineer-statisticians as the originators of the proportional symbol and flow symbologies. Playfair may have been the first to use proportional (value-by-area) symbols (specifically circles) to represent quantitative data, but it wasn’t on a map.

Funkhouser credited Minard with the invention of the flow symbology, ignoring Harness’s innovation eight years earlier:

The second, called cartograms with bands (cartogramme a bandes), was originated simultaneously and independently by the French engineer, Minard, and the Belgian engineer, Belpaire, in 1845. This consists of colored bands or ribbons which follow the watercourses and railways on a map, the width of the band being proportional to the amount of traffic or number of passengers carried.

It’s certainly the case, though, that Playfair paved the way for much thematic mapping experimentation in the early 19th C. and that Minard helped popularize the flow, proportional symbol, and choropleth symbologies.

]]> http://indiemaps.com/blog/2009/11/the-first-thematic-maps/feed/