Javascript Final: Mapping NYC

Background

As I mentioned earlier, I wanted to utilize this javascript project to explore the Google Maps API in depth as well as working with APIs for open data sets using government data.

My final iteration of this project includes 2 separate maps pulling from two different datasets through the “SODA API” which is what NYC uses with their open data.

Javascript Final Screenshot

Elements Used

Each of the datasets (WIFI hotspot locations and 311 complaints) are added as a data layer to custom google maps generated with the Google maps API. Aspects of this data (stored online as a GeoJSON file on NYC’s servers) can then be accessed by either hovering over or clicking on various elements.

I also used Wow.js to set up some simple entry transition effects when the page loads.

The JQuery is used in this application to load the map (much easier than 2 lines required in javascript) only when the rest of the document has loaded (which is why it takes a second for map to load). Most of the Google Maps API examples are written in Vanilla javascript, so I stuck to what they had, but am confident after more exposure to jQuery that I could rewrite most functions in this manner (as I did with document.ready).

Observations & Results

This project was really fun because even in just loading the data to the maps, I am able to make some interesting observations about the data. For example, there seems to be a proliferation of WiFi hotspots in Harlem (more dense than anywhere else in the city) and they are “owned by Harlem”. This may indicate that there was a community-wide effort to install free WiFi for residents. There are also other densities on the map that are interesting, and can help us to understand the shape of interactions and networks in NYC. My original hypothesis, that outer boroughs and less affluent neighborhoods would have less free WiFi did hold up pretty well to first look.

The Next Iteration

For the next iteration of this project, I would want to make the different markers for the data correspond to features of the data. For example, all of the AT&T wifi symbols would be blue, Verizon would be red, etc. I think this would help to even further understand the relationships between technology, money, and place.

Final Video & Code

Check out a demo video of my project below, and find the full code for the project on GitHub at Javascript Final.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s