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.
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…
I 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…
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.
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…
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.
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.
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…