Code Sample: JS/jQuery

View as standalone page (Please View Source from there)

What is this? The Washington Post has been regularly updating a .csv file tracking every fatal police shooting in the US since January 2015. My code reads that file and places every victim's name, date, and location on a Google Map for the last 3 months. Hover over a map marker to see info about the victim(s).

Why? I chose this example project to show my skill in cross-server AJAX calls, data crunching, third-party APIs/libraries, and so on, all in Javascript/jQuery rather than PHP/MySQL.

How does it work?

  • Gets the shootings data file from Github via AJAX, which is parsed using Papa Parse JS library.
  • Narrows the data to the last 3 months.
  • Imports and parses a locally-stored .csv file linking cities to coordinates, since Google Maps requires latitude/longitude coordinates to place a marker rather than just a city name.
  • Generates the map, then places a marker for each city.

Future enhancements:

  • Allow the user to change the number of months of data displayed, or enter start and end dates, and refresh the map.
  • The cities.csv file is large but is missing several towns, and it keys off of zip code rather than city/state pair, resulting in duplicates. Since lat/lng data is static, transform it into something more directly useful.
  • Improve performance by figuring out how to cache and expire the shooting data, saving a cross-server request.