January, 2012 Archives

With the news that H Street was getting the city’s newest bike shop, The Daily Rider, I wanted to create a map showing the distribution of bike shops in Washington, DC. I turned to Google Maps to give me an easy tool to display a set of place markers.

The Bike Shops and Beyond project is a more manageable scale than the 11,485 data points I needed for the Metro Bus Stops map, which at 5 megabytes was impractical for casual browsing. (See Mapping Metro‚Äôs 11,485 Bus Stops.) But the implementations aren’t that different.

Originally I was content to map only the city’s 13 bike shops. That got me thinking about other key retail venues that make neighborhoods more livable, so I added options to show cupcake shops, bowling alleys, and theatres. And I was also interested in the distribution of grocery stores, so I added them, and then tossed in Metro stops too. After adding Amtrak stations and National Airport, I thought a nice finishing touch would be Capital Bikeshare stations. Along the way I also started adding markers for neighboring jurisdictions, though these are by no means complete. (Arlington is almost complete.) » Continue Reading…

Game-ification is the process of turning public data or user-generated content into a game. As a heavy user of Flickr, I’ve been interested in different ways to discover and play with their rich repository of photographic content.

Earlier this month I wrote a JavaScript Concentration Game. By default it uses pre-determined photos from my own Flickr collection. But now you can start at the “about” page and plug in the name of a Flickr user or group, or find photos by searching the text or tags. (Try it here.)

Clicking on a photo brings the title and owner to the top of the screen, which you can click to open the original Flickr page in a new window. At the end of a game, you have the option of playing with the same photos, or drawing the next “page” of photos using the same search criteria.

Game-ification both makes playing Concentration more interesting and adds a fun new way to explore Flickr.

Spot Check is a new application that lets you discover geotagged Flickr photos across an area. It divides a place into a grid and returns the top result for each square on the grid.

I was curious if I’d discover differences between neighborhoods. How different would a search be between adjacent areas?

Configuring your search starts at the Spot Check Panel. First of course you have to specify the area to search. The first method is the most precise: entering latitude and longitude coordinates for the corners of a rectangle. But this isn’t very user-friendly. The best trick I know for getting coordinates is to go to Google Maps and right-click a spot on the map; when you select the “What’s here?” option, it will put the latitude and longitude in the search box, which you can then copy and paste. » Continue Reading…

Discussion in the RoundI attended my first “unconference” this weekend at Transportation Camp, which came for the first time to Washington, DC. The conference was for anyone interested in urban transportation and technology.

The “unconference” aspect meant that the attendees themselves created the presentations. Anyone interested in leading a session wrote their proposal on a large fluorescent sticky note. The camp leaders then culled the proposals and organized them into four time slots. Presenters with similar content were encouraged to merge their sessions together. The choices were presented on a large grid, referred to as “The Board.”

The day began with a great breakfast, as folks gathered at the cafeteria tables in the School Without Walls, a public high school on the George Washington University campus. I was really impressed with the facilities. » Continue Reading…

Transportation Camp 2012

Surely the city’s strangest annual tradition, the No Pants Metro Ride returned to Washington, DC on January 8. I of course opted against participating, but did check it out with my camera. It’s not that I’m shy; I just don’t like having folks pointing and laughing at me. The event is sponsored by Capitol Improv, which gives the mission a goofy innocence. There’s a wide range of reactions, but for the most part the event brings a wry smile to passers-by on a cold winter day.

More photos available via the nopants2012 tag.

No Pants Metro Ride 2012

When I take screen shots of web applications, I like to be able to control the aspect ratio, typically 3:2. It’s tough to judge pixel lengths by eye. So, I created a little utility called Browser Sizer that lets you control how big the window should be.

You can specify either the pixel dimensions or just a ratio. Another option lets you choose pixel dimensions from a list of popular mobile devices. You can still try to eyeball the best size, then grab settings from the current window.

The ratio option lets you enter your desired aspect ratio (or grab the current window’s ratio). To convert the ratio to width and height in pixels, you have three options: you can shrink or enlarge the current window size until it fits the desired ratio, or select “maximum” to have it fit the screen’s available space. » Continue Reading…

This movie is almost a sequel to The Robot, except it stars our favorite little stick figure. Having figures fly is my favorite thing to animate; much more poetic than the drudgery of walking.


Concentration is an old card game ideally suited as a computer program. Instead of cards, I use photos. The game is a pure memory skills test.

Six pairs of photos are hidden behind squares. The player uncovers two squares at a time. If they match, they remain uncovered. If not, they become hidden again. The goal is to commit the photo’s location to memory so that when a new square is uncovered its pair can be found. Find all pairs using as few guesses as possible.

Like Mastermind and Hangman, Concentration was written in JavaScript, and designed to scale for any display, from large desktops to small mobile devices. I recycled much of the same code from those other programs (see Building Mastermind for All Screen Sizes and Creating Hangman in JavaScript). The layout is determined dynamically at start-up and when the window is resized. » Continue Reading…

Hangman is a word-guessing game, less abstract than code-breaking Mastermind, and using English phrases as the target of the player’s guesses. The tools of the game are simple enough to implement with a simple JavaScript program, and should scale well for full-size desktop screens or smaller mobile devices.

I used some of the same code from Mastermind (Building Mastermind for All Screen Sizes) in order to have the layout easily scale to fit the user’s screen. Because the hidden phrases can greatly vary in length, it’s hard to know how many lines it will require for a given screen width and line height. (Font size does refer to vertical height, but the line height setting is usually more important.) The offsetHeight property purportedly gives you the height of a block in the document object model, but I’ve seen too many times when the value is wrong, only to see it right a few seconds later. I suspect rendering is done in a separate thread, and offsetHeight may not be accurate immediately after assigning content to a block. So, for that reason the Hangman puzzle will overlap lower sections sometimes (and can be corrected by slightly resizing the window). I suspect the best solution might be to switch to using a canvas element to render the entire game. » Continue Reading…

Mastermind is a simple code-breaking game that’s educational and fun. I grew up playing the Hasbro game, where one person configures the code and the other tries to solve it. The tight logic and scoring algorithms make it a good fit for programming projects.

For this version, I wanted the design to scale to both a desktop and a mobile device. An old program I had written put the output in a table, but as I played with dynamic scaling, it dawned on me that the table structure wasn’t adding much value. Design purists famously hate tables used to control layout. I’m no purist, but this seemed a good time to dive into using CSS and JavaScript to manage the output.

Each element in the game exists in a div tag with an ID. There are two CSS properties I set universally in the internal style sheet: » Continue Reading…