Two ongoing things are keeping me entertained in my spare time these days.
AUTOMATED METRO MAP GENERATION
Metro or subway maps are cool. They’re simple, effective topological diagrams showing you how to get from Point A to Point B in the system. And, I might add, they make great symbols of the cities whose metro systems they depict. (This, of course, has most successfully been the case with the famous London tube map.)
There’s usually a lot of manual labor involved in designing these maps, but they’re also an obvious candidate for automated layout attempts. I wouldn’t waste my time trying (and failing) to invent some algorithm, as more brilliant people before me have done so much better than I could, but I am interested in implementing one for some sort of tool that can be fed a KML or other geodata and spit out a simple metro map-like diagram.
I’m currently in the early stages of working through the method devised by Jonathan Stott for his Ph.D. thesis (25 MB PDF).
Above is some early progress on a single subway line, a branch of the Red Line of Boston’s MBTA (or “T” if you like). It’s not great yet, but I’m not done yet. (Gotta get rid of those 90-degree turns!) In the end I’m hoping that I’ll be able to produce a map of any network of lines and nodes, be it a subway system, roads, or what have you. Stay tuned, and I’ll post when I have made some actual progress.
POOR MAN’S GPS TRACKS
Speaking of transportation, the other mini-project is to keep track of everywhere I go and the mode of transportation to get there. I’m not carrying a GPS receiver everywhere, but I do keep unreasonably detailed memories of all my travel paths (at least for a short time). I’m hoping that after a while this map might be mildly interesting because 1) I work from home, so my trips are somewhat irregular in both timing and destination, and 2) my movement around town is pretty multimodal.
Here’s most of my January so far. (Green: by foot, Purple-ish: by car, Blue: by bus, Black: by subway)
Hoping this will make for a sweet animation after some months. But you’re right; it’s probably stupid.
I once attempted to draw a map of Wisconsin by hand, for no particular reason.
I’m writing a stupid blog post about it.
It’s freehand, of course employing the help of a grid that was also overlaid on a map used for reference. You know it’s hand-drawn because of the requisite old-timey coastal effect:
I’d probably try to finish it (or would have tried to finish it sometime in the last year) if I hadn’t inked my crappy lettering already. Or if I had an iota of artistic skill for drawing awesome symbols on the map. At least the boundaries and shorelines are passable, though.
There is no real purpose to this post, but I will invent three:
Real cartographers draw maps by hand once in a while.
Computers are way better at making maps than real cartographers, but remain incapable of love.
I finally opened my CubicBezier AS3 class, the only reason anyone ever finds this site at all, for the first time in many months to attempt to address some of the various comments and reported problems from the original. It’s not perfected, but I’ve done three things:
Added a “moveTo” argument to the curveThroughPoints method, following the idea in one comment on my blog post. Ignore it if you wish, but if you set it to false, the curves will connect to wherever graphics drawing left off rather than moving to the beginning of the curve and starting anew.
Hooray trigonometry! Messed with some of the angle calculations to fix problems with zero angles and division by zero. I hope it worked.
Provided a line of code that can be altered to use lineTo for straight segments of 3 or more points rather than curving.
Straight lines were raised as an issue in several comments. While I think I have fixed the crazy behavior of straight horizontal and vertical lines, I suspect the result for three points in a line may be surprising at first glance. For instance, the three middle points in the image below are all aligned horizontally.
The S-curve through those points may look odd at first, but it’s actually to be expected with these cubic Bézier curves. Of those three points, only the middle one has curve control points that are also aligned horizontally. The outer two have control points that are also based on the points outside the line. Here’s an approximate example from Illustrator of what they look like
I’ve left that as the default behavior, but I did insert some code that can be modified so that the curve essentially stops curving when it reaches several points in a line, draws a straight line through them, and then continues curving as normal after that. Here’s what the same example looks like with that option enabled.
It’s probably often fine, but I caution that it can result in sharp corners. Here’s the same with those dots removed:
I’m uncertain what’s best, so I’ve made that a line of code that has to be changed rather than a more accessible option. I’d be glad to hear ideas on how best to handle it. Feel free to change it however you like, of course. That and other modifications are identified in the comments.
Download the class here: CubicBezier.as
The previous version is here, in case I screwed something up. Forgive my lack of version control.
I don’t technically have any authority on the subject of logo design, but that won’t stop me from declaring that maps always—always—are the correct choice for logo designs. So while I attempt to cook up some more interesting projects to post here over the holidays, I leave you with this, my favorite logo lately:
That’s the logo of DARBI (the Davis Square Area Resident-Business Initiative), representing Davis Square in Somerville, Massachusetts. I moved to neighboring Cambridge several months ago and have become very aware that surface thoroughfares in Boston and environs are not long, continuous paths but rather connections between various neighborhood centers, whose central intersections often have a “Square” name. Most commonly, however, these “Squares” are nothing like that shape but instead are (as I am wont to describe it) clusterf***s of multitudes of one-way streets converging in a single spot. By car it is easy around here to travel between squares, but through them is another story entirely.
Davis Square (map) is no exception. But what is an exception is the attempt to assist motorists with this sign on approach to the intersection:
It’s a nice, simple map to help you quickly make sense of your five choices at the intersection. That map itself is something of an icon*, but the DARBI logo takes it a step further, stripping the map of its identifiers of map-ness.** That’s when a map logo achieves perfection in my eyes. It’s like a secret wink to cartographers; you’ve got to be one to realize that you’re actually looking at a map. Not true, I know, but sometimes you look for ways to make your line of work seem special.
* Via Boston Coasters one can purchase a number of items featuring that image (which is from B Beaucher Studios, to give credit). By the way, I highly recommend the Boston Coasters/Ward Maps store near Harvard Square (or online) for lots of stuff with cool maps and images of that ilk as well as old maps.
** And turning it into a friendly creature whose smile assures you that even if you get hopelessly lost attempting to navigate the square, it’s okay, because hey, you’re in wonderful Davis Square now, and by the way, next time you should probably just take the T.
A while ago I wrote a summary of basic map panning and zooming methods along with demonstrations of most of them. There were a few requests for code examples for those demos, so (finally) I thought I’d outline some of the simple methods for doing it in Flash/ActionScript.
I’ve put together two AS files:
A PanZoomMap class, with some simple panning and zooming methods.
An example class that creates an instance of the PanZoomMap and demonstrates zooming, basic click and drag panning, and a zoom box.
The code has some simple comments that I hope give an idea of how it works. I’ll let them do the talking, as anything I write here is likely to be long-winded and confusing.
The example is really very basic. A real interactive map is likely to require some more complicated capabilities than what I have provided here, but this is a starting point that may be helpful to anyone who needs an introduction.
Here’s what the test file does. A simple click-and-drag pan/zoom example:
We’re working on putting together a few election maps and and graphs at Axis Maps, and above is one that we’ve come up with so far.
It’s a standard red-blue map indicating the winner of each county in the lower 48 states, where the transparency indicates the population of a county. The many counties with low population fade into the background, diminishing their visual prominence. This is meant to accomplish something similar to a cartogram, where sizes are distorted to show the actual distribution of votes. It’s step one of trying out alternatives to the cartograms that I complained about earlier this week. I won’t claim yet that it’s better… just different.
