Skip to content

Latest commit

 

History

History
102 lines (73 loc) · 6.5 KB

labs27_README.md

File metadata and controls

102 lines (73 loc) · 6.5 KB
Raw

Human Rights First Police Use of Force Map - Front End

Description 👇

Disclaimer: This application is currently in Alpha (as of Oct 20, 2020) and is not ready for production. Please use at your own risk as things will change almost daily.

  • Our team is developing an interactive map that identifies potential instances of police use of force across the United States of America for Human Rights First, an independent advocacy and action organization. We are also developing additional graphics to track and display police brutality trends.
  • An application that takes information from data provided by the data science team collecting relevant incidents and data from Twitter, Reddit, and police agencies to display it on the map.
  • This app will display various incidents of police use of force on a map that can be filtered by type of brutality and location with zipcodes and states.

Deployed App

Features

  • a dynamic navigation bar with tabs displaying either the Map, the Graph, or the About page as well as a popup with the Filter form
  • Sign in/Sign out options (not functional)
  • Graph:
    • timelime view of number of incidents over the course of a year (data dates range)
    • ability to filter out data by type of brutality used
  • Filter (currently applying just for the map):
    • date range implemented (not functional)
    • reset filters (not functional)
    • select state dropdown or search state by typing(selected state can be removed with one click on the x button on the right afterwards): zooms onto the selected state
    • search by zip-code (looked up zipcode can be removed with the x button on the right of it afterwards): zooms onto a zipcode location
    • filter incidents by type of brutality
    • filter incidents by type of source like Twitter, Reddit, etc (not functional)
  • Map:
    • graphic content warning screen
    • Control panel:
      • ability to navigate and zoom on to user's location
      • zoom in/out the map
      • reset bearing to north
    • dynamic Hide/Show Map Options menu:
      • enable/disable zooming on the map with mouse scroll wheel
      • enable/disable fast travel states: turns on a hover option for each screen and zooms onto the highlighted state when clicked
      • reset map view to the original view

Requirements

Environment variable

  • REACT_APP_MAPBOX_TOKEN Mapbox access tokens (check https://docs.mapbox.com/help/how-mapbox-works/access-tokens/)

the token can be found on the previous team's deployment info page or recreated on mapbox studio

Components

  • Loading Page
  • NavBar
  • Filter Form
  • Map
  • Graph
  • About

Styling Our App

  • CSS
  • AntD

Data Visualization

MapBox - https://docs.mapbox.com :

  • using mapboxgl approach

The Team

⚠ Contributing - future features needed/desired for this project:

Please refer to the highlited parentheses statements throughout this ReadMe for better understanding

  • successful connection between Back End and Data Science teams
  • successful connection between Back End and Front End teams
  • Register/Login functionality added (currenly not functional)
  • ability to reset filters
  • ability to apply and filter by date range
  • ability to filter by source type
  • prevent map refresh/reload when filtering data by incident type:
  • make filter for functional with the Graph
    • add more options to the Graph like filtering by state or zipcode or displaying data based off of date range