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. Here is a little the non-profit from their website:

Human Rights First is an independent advocacy and action organization that challenges America to live up to its ideals. We believe American leadership is essential in the global struggle for human rights, so we press the U.S. government and private companies to respect human rights and the rule of law. When they fail, we step in to demand reform, accountability and justice. Around the world, we work where we can best harness American influence to secure core freedoms. We know it is not enough to expose and protest injustice, so we create the political environment and policy solutions necessary to ensure consistent respect for human rights. Whether we are protecting refugees, combating torture, or defending persecuted minorities, we focus not on making a point, but on making a difference. For almost 40 years, we've built bipartisan coalitions and teamed up with frontline activists and lawyers to tackle global challenges that demand American leadership. Human Rights First is a non-profit, nonpartisan international human rights organization based in New York, Washington D.C., Houston, and Los Angeles.

Jason Long	Mark Rivera	Michael Rockingham	Jen Stewart
Technical Project Lead	Web Developer	Web Developer	Web Developer

Front End Deployed Site

Back End Deployed Site

Data Science Deployed Site

Front End Repo

Back End Repo

Data Science Repo

Inherited Work

• How to get started working with this repo

  • See TPL about .env file configuration

    REACT_APP_BACKENDURL = "WEB_API_DEPLOYMENT_URL"
    REACT_APP_MAPBOX_TOKEN = "MAPBOX_GL_TOKEN"
    

• Where each portion is deployed

  • FE: Deployed on AWS Amplify
  • BE: Deployed in Heroku
  • DS: Deployed on AWS Elastic Beanstalk

• List the tech stack used
  • ReactJS
  • MapBoxGL, React-Map-GL, Supercluster, Use-Supercluster (map)
  • Chart JS
  • React-Query, Axios (fetches server data)
  • AntDesign

• User can see clusters of incidents on a map that breaks apart as they scroll in so that they can see more specifically where each incident in the cluster occurred.
• User is able to click on a data point within the map and view more details including date, description, tags, and sources.
• User can view charts by state or by use of force tags to see where incidents are more prevelant and what type of force is most commonly used.
• User can view incident data and browse through them using pagination
• User can view trends in data with data visualizations in the form of graphs
• User can download the publicly available data in CSV or JSON format

• DS backend scrapes and shapes data

• Web BE gets data from DS backend through a cron job and updates Web Database

• Web FE can use endpoints to fetch an incident by or all incidents (currently we are only fetching all incidents at once)

• Describe the file hierarchy and where to find things

• FE specific file hierarchy

• src >> index.js >> App()

  • NavBar on all pages

  • Switch / Routes for all page view components

  • Important Page Views:

    • path='/' --> <MapView/>
    • path='/graph' --> <GraphContainerView/>
    • path='/incidents' --> <IncidentsContainerView />
    • path='/about' --> <AboutPageView />

• <ReactQueryDevtools --> devDependency only (won't show in production)

• ChartsNavBar displayed on Map, Bar, and Pie Charts to switch between chart views

• src >> components >>

  • 📂 Map 📂

    • MapView.js --> renders both the container for the Map and an incidents viewer side-by-side on the page

      • Pagination.js gives users the option of what chart to view

      • MapContainer.js

        • MapContainer renders the MapboxGL Map as well as the ClusterMarkers that represent underlying data points

        • ClusterMarkers.js

          • cluster markers can add incidentsOfInterest to state
          • size of cluster is calculated using weird formula -- this could be improved so that as the data set gets larger we don't have to continually update this function
            • ${10 + (pointCount / points.length) * 600}px
            • the clusters are offset to the left and vertically to center the circle properly
            • the value we want to pass to the offsets is negative (1/2 of the width or height) pixels
              • offsetLeft={-(10 + (pointCount / points.length) * 600) / 2} <--> same as offsetTop

      • IncidentsViewer.js

        • IF there are no incidentsOfInterest, we display a message explaining to the users they can click on a cluster to view the incident data
        • If there are incidentsOfInterest, we map through all the relevant incident data and display underlying incident info for the user to explore to the right of the map

  • 📂 bar_chart 📂

    • BarGraph.js --> renders the container for displaying a bar chart that totals incidents by state

      • Pagination.js gives users the option of what chart to view

        • fetches incident data using custom react-query useIncidents() query_hook and renders the actual bar graph

        • BarChart.js

          • ChartJS component that uses the data we passed in ... expects an array of objects

  • 📂 pie_chart 📂

    • PieGraph.js --> renders the container for displaying a pie chart that totals incidents by type-of-force tags provided by our DS backend

      • Pagination.js gives users the option of what chart to view

      • PieGraph.js

        • renders <PieGraph> in a very similar way as the bar char
        • PieGraph.js
          • ChartJS component that uses the data we passed in ... expects an array of objects

• Optimized Map and unified code databases
• Added 3 ChartJS components to display data in different visually appealing ways
• Charts fed data by parent component

• Incidents

  • https://humanrightsfirst-a-api.herokuapp.com/incidents/getincidents --> returns an array of all incident objects
  • https://humanrightsfirst-a-api.herokuapp.com/incidents/gettimeline --> returns events for the timeline on the map component
  • https://humanrightsfirst-a-api.herokuapp.com/incident/:id --> returns single incident object if the incident_id passed in is valid

Who to contact for further support. Jason Long, Mark Rivera or Michael Rockingham