I’ve recently submitted an entry to the NYC BigApps contest. My entry is called PlayaroundNYC and it is a visualization of how well supported New Yorkers are by public playgrounds as determined by walking distance and quality.

playaroundnyc

You can read about how the map works on the How It Works page. To summarize, pink areas of the map are areas that have short walking distances to high quality playgrounds. Gray areas are those that are either far from playgrounds, or whose nearby playgrounds have a low quality rating (as determined by pollution from nearby truck routes).

The heat map was generated in Java using the Eclipse IDE with the Processing library. The playground list was taken from the NYC Datamine. The latitude and longitude coordinates of the playgrounds (as well as basic information like borough) were scraped from the NYC Parks Department website. I’ve made available a Playground CSV file which lists the playground’s name, geolocation and other supplementary data not available in the original Datamine version. I hope this will save some effort for others looking to generate similar visualizations. The borough outlines of NYC are also taken from the NYC Datamine. The truck routes were taken from the NYC DOT website. All of this data was processed in Java and rendered out as a series custom tiles at different resolutions for use in Google Maps.

The site experience is built entirely in HTML/Javascript. The custom generated tiles are loaded into a Google Maps instance using the v3 version of the API. Unfortunately, this was the first time I’ve worked with Google Maps and I wasn’t aware until late in the project that the v3 API has yet to implement many of the features which are commonly used in v2. One of the missing features for the Google Maps Javascript API v3 is the ability to layer custom tilesets over the existing map. As this is the core visual representation of PlayaroundNYC, it was a huge problem to not have this. Luckily, I was able to find tileoverlay.js by Chad Killingsworth, which solved this problem for me.

This project was developed during the month of November in the wee hours of the night (after my kids went to sleep) and during a couple of days I expressly took off from work to finish this project. I had a lot of fun doing it and learned a lot about Google Maps and custom tilesets that I hope to take advantage of in the future.

Personal projects can be hard to finish as the temptation to continually improve a project can become an irresistable Siren’s song, ultimately dooming the project by exhausting it’s creator long before it’s finished. By having a contest deadline, I was forced to scale the project to what I could do in the timeline. There were additional data sets and visual improvements I wanted to add, but ultimately I’m happy having something small that’s finished than something that’s large and incomplete.

Part of the contest involves a “User Choice” award based on public voting. Please vote for my entry on the BigApps website.

Screenshots

Below are screenshots of the site as it launched in early December 2009.

intro
map_01
map_02
howitoworks
about

Evolving Prototype

I’ve included various screenshots that were captured during the prototyping process.

01-blue-grid-red-pg

Figure 1. Evenly spaced grid in blue with playgrounds in red.

02-blue-grid---truck-routes

Figure 2. Evenly spaced grid in blue with truck routes in red.

03-points-connected-to-near

Figure 3. Evenly spaced grid in blue. Playgrounds in red. Grid points are connected to nearest playground by green line.

04-alldata

Figure 4. Map containing all playgrounds and truck routes.

05-firstlook

Figure 5. This was the first look at a calculated “quality” measure. Up until this point, I did not know if this idea would actually produce a visual worth looking at. Quality in these early renders was based only on nearest playground. Later versions would take into account all nearby playgrounds.

06-second-look,-mid-rez

Figure 6. Same as figure 5 but with a higher resolution.

08-heatmap

Figure 7. These early heatmaps were not snapped into specific levels. I find the maps less distracting and easier to follow when they’re broken into distinct levels rather than being smooth gradients.

10-first-google-maps

Figure 8. The first version rendered and viewed in Google Maps. A low resolution was used to keep down render time while making sure the generated tiles were properly aligned and scaled.

11-heatmap-truckroutes

Figure 9. A render that included truck routes and an outline of the boroughs. I would like to add the truck routes as an optional layer in the future.