U.S. post offices … now with clickability!


(Click the image to go to the map – Java-capable browser required.)

I’ve never done any interactive mapping before, and wanted to test the waters using Processing. After the positive reactions to my post office expansion video, I thought some people might find an interactive version interesting or useful.

I used the code that produced the video as a foundation to build interactivity into the map. The most significant visual change was the move to a dark background with bright data points. While I’m not entirely happy with the “civilization illuminating a dark continent” effect that might be communicated by this choice, I wanted to provide some variation in how opening dates were represented, and on monitors I’ve always found bright colors easier to distinguish from one another than dark.

Interaction allows a more in-depth exploration of the data: this map includes the ability to set the range of dates displayed, zooming and panning, clickable points, and user-controlled playback for a given date range. I tried to make things relatively straightforward: use the buttons at the top or drag and scroll with the mouse to pan and zoom. Click on a highlighted point to show more information. High and low dates can be changed by dragging them along the timeline, while dragging the selected range will move it while maintaining the date gap. Use the buttons to the left of the timeline to play, stop, or change the speed of automated playback.

I don’t have much to add in the way of analysis that wasn’t mentioned in the thread of my previous post. I’d encourage you to explore different date ranges, though – you can see some interesting patterns of activity that were lost in the previous video by zooming and selecting specific dates.

I’m happy with the final result, I learned a lot during this process, and I’m excited to apply what I’ve learned to some other projects I have in mind. I wish the performance were a little better, and in the future I’d like to try my hand at some more browser-friendly interactive projects using Processing.js. I’d welcome any criticisms or suggestions on the design – particularly regarding the user interface and implementation of interactivity.

25. September 2011 by dwtkns
Categories: Maps | Tags: , , , , , | 3 comments

Comments (3)

  1. Great work again Derek, loved the original and this is a great supplementary piece – particularly like the use of colour to indicate the ‘age’ of the data points, really brings out an extra layer of insight.

    I’m really interested in the curved line of data points right in the centre of the image above – I’m not great on US geography but wondered if that reflected a long stretch of highway?

  2. It says that access is forbidden to the map, is there something wrong? I think it’s an awesome example of mapping using Processing.js, would love to share it with others!

Leave a Reply

Required fields are marked *