Dashboard on YTD shootings in NYC built Vue.js, Express.js, Node.js, Mapbox, and NYC Open Data. View working component. "Eco" dyno, takes a few seconds to wake up.
Project meets general accessibility (WACG) and cross-browser requirements. More testing with a dedicated services (e.g., Sauce Labs) would be helpful if deploying to production.
-
Tables on desktop
-
Tables on tablet
-
Map on desktop
Clone down this repository. You will need node and npm installed globally on your machine. The Express server uses the Fetch API. You will need a later version of Node (18+) for this to work.
Installation:
npm install
To Run Vue:
npm run dev
To Start the Express server:
npm run start
To Visit App:
Visit the localhost port displayed in the terminal after running npm run dev. You may need to disable your browser's Cross-Origin Restrictions.
My goal was to build an app that fetches and compiles NYPD data on shooting incidents. The NYPD releases data for the current year at the end of each quarter. Unfortunately, in NYC, this involves a lot of shootings and a lot of data. I tested different approaches: making multiple calls to the server for smaller amounts of data versus one call for all data. The single fetch offered better results. I fetch all data at once. I then loop through the returned data multiple times to compile the statistics. I also store the data locally in "session storage." If the user leaves and returns during the same session, the data can be pulled from the browser's memory and there is no need to fetch it again from the server. Using "local storage" was also an option but with a downside. If the NYPD updated its data before users cleared their cache, users would miss out on updated data.
- Shooting data from NYC Open Data.
- API guidance from SODA Developers.
- Readme guidance from Brenna Martenson.
- Linting guidance from ESLint and Stylelint.
- Design guidance from Google's Material Design.
- Accessibility guidance from Chrome's Lighthouse and Firefox's Developer Tools.
- Shields from Shields.