Roof Piano - How was this done?

[buditanzi]

http://nyc.pediacities.com/fsmaps/RoofPiano/

[datadave]

Potentially with something like this: https://developer.cdn.mozilla.net/media/uploads/demos/M/i/MikeMnD/bbd077c574670ad3c70aab5aa64258be/html5-piano_1315774273_demo_package/index.html

I noticed they used the 'howler' javascript library as well.

[aykutsimseks]

Hi everyone,

Thanks to Dave for inviting me to the conversation. I’m one of the Ontodia engineers who created RoofPiano. RoofPiano was an experiment for us to combine music, data and NYC. When NYC Building Footprints data was published last year, there was a big hype around working with it (which is a common thing when a long awaited dataset get published). We wanted to build something rather more interesting this time. Our “Data Storytelling Fellow” Amanda Smart had this idea of “sound of the city” kind of project, so we thought what would define the sound of the “concrete jungle” better than its buildings? The diversity and clustering of buildings would generate different tones in different neighborhoods and etc. So we started experimenting if we can manage to build something.

Step one was to cleanup the data. If you visit the building footprint link you’ll see the file is in GeoJSON format and even the zipped version of the data is 184MB. This is way beyond the limit of creating any kind of interactive realtime visualizations. A common approach in such cases is to aggregate and work with aggregations, however as we’re interested with the shapes and heights of individual buildings it was not an option this time. So, we decided to chop off the columns of the data that we wouln’t need. That saved us some space, however it wasn’t enough. Another option while working with geospatial data is to simplify geometries so that they are less complex than their original versions, hence takes up less space. There are many tools you can use like QGIS, ArcGIS, etc., but if you’re not really GeoSpatial savvy I’d recommend you to use something like: http://www.mapshaper.org. The problem with simplifying geographies is as much as it saves you a tremendous amount of space; much of the original geography can be lost. You need to maintain a fine balance so that your geographies would not look like random shapes scattered on the screen. So once we reached the point where further simplifications would just make it look worse, we had to take one extra step towards shrinking the size of the file. We decided to only stick to Manhattan buildings, which contain around 46,000 building footprints, and filtered out buildings in other boroughs. Finally our file size was around 12MB, and we could start working on it.

The second step was to actually get the building data on screen, so that we could play around with it with user interaction. Using JavaScript and libraries like D3, Leaflet etc. is pretty much becoming a standard for this kind of interactive visualization purposes. However, when it comes to working with geospatial visualizations our partners CartoDB provides a really robust and easy to use platform for hosting and quickly visualizing geospatial data. Using cartodb.js, soon enough we were able to visualize the building footprints on our screen, and color the map as you hover over.

After getting the data on screen correctly it was time to implement the “sound of the city” concept. We looked around the ways to play sounds with JavaScript and discovered howler.js, which is a library enables you to play audio via JavaScript code. We decided to go with a piano, as it would provide a wider range of sounds than most other instruments. You can easily order the keys from low to high notes. We felt it was elegant enough to associate with this classy place. Amanda went and asked her friend to record all 88 piano keys in mp3 format. That being said, the piano sound is arbitrary in here, as you could have used any other insturment sound or whatever sound you feel like hearing. We mapped the height of buildings to their respective keys (for example the lowest key would be lowest building, and the Empire State building would play the highest sound). After integrating howler.js to our previous cartodb code, now along with coloring buildings by their heights we could also play piano keys based on their height.

Finally, we wanted to take the project one step further and let people play their own pianos and see how NYC responds to it. As Dave pointed out we’ve found an 88 key piano implementation by Mihail Ilinov. We modified his code a little bit to decrease to number of keys to 36 keys, as it looked better on screen. Now based on the keys being pressed we used cartodb.js to trigger all geographies falling into the selected key’s height bucket.

The rest of the implementation was a lot of tweaks and changes with styles and etc. As I don’t want to go off topic from the Data Science part, I’ll leave it as is for now. But if you’re further interested, have any specific questions, or any feedback on RoofPiano project feel free to write in this thread or shoot me an email at aykut.simsek@ontodia.com. Also, we have a lot of cleaned, wrangled datasets about New York City for your project purposes. Check out our nycpedia platform, where most of our data is publicly available.

Cheers, aykut simsek