Troubleshooting Troubling Trends in Police Data, or :
How to leverage a Full Stack Toolkit to Understand Civil Conflict and Do Good
Coding Truth to Power
“Justice will not be served until those who are unaffected are as outraged as those who are.”
— Benjamin Franklin
2020 has been a watershed year. A global pandemic, a rising tide of demonstrations and protests from citizens at home and abroad who’ve grown disenfranchised and disaffected by the powers that be. Follow that up with
My own growth has followed a similarly tumultuous trajectory this year. When the Covid dominoes started falling at the beginning of March, I was one 20+% of my fellow American comrades who was out of work. As a recent graduate of philosophy, I had entered the workforce looking for ways to affect positive change in my own life and others — in other words, I wanted be a force for good, but I didn’t know how.
Six months ago, I found an answer to my call, and that was Lambda School, an all-remote incubator for learning the ins and outs of web development. As someone who grew up on the internet, I’ve born witness to the countless ways that the fiberoptic cables threaded between you and I have defined movements and catalyzed change in practically every realm of society. When I was accepted to the June class of Full Stack engineers, it seemed like an unparalleled chance to nurture skills that I could harness to affect some positive change.
I’m writing from the last week of my final project before graduating from lambda, and it has proven that hypothesis was correct. Labs, as its called, is a month-long sprint working on a team with other Lambda students on a living, breathing codebase that’s meant for distribution.
To give you a taste of the immensely challenging and rewarding experience my first bona fide development project turn out to be, I want to share with you our team’s effort to tackle this prescient engineering challenge, including some of the following:
— Aligning development goals with a stakeholder’s mission
— Creating user stories that articulate how features deliver value
— Collaborating remotely on renovating a legacy codebase
— Interpreting data with React, Redux, and Chart.js
— Engineering technical solutions for real-world problems
Now, let me walk you through our trials of the technical challenges and ethical quandaries our eight-person cadre of web developers and data scientists wrestled with over the last four weeks.
Understanding the Issues
The last four weeks were focused on to a single cause — helping the nonprofit Human Rights First (HRF) with its initiative to shine a light on the trends of police use of Force in the United States. Our eight-person team was tasked with diving into the existing repositories and building upon the existing schemas
We began the project by meeting with the stakeholder — Dr. Welton Chang, the Chief Technology Officer for HRF — to get oriented with their mission and to better understand how we could contribute to their cause. Moreover he emphasized that the features we would build, and how we built them, was entirely up to us; all he asked was that build with the Human Rights First goal in mind.
Our team, which had never met before, huddled up in a Zoom call afterwards to break the ice and begin working out our flow
The simple fact of the matter is that there is a sordid disparity of justice being served by Over 800 Americans have been killed by police so far this year, still less than any of the last four years in this country. As one of four front end engineers on this project, I was responsible for aggregating this information and displaying it in a clear, unbiased, and engaging way.
To effectively deliver features that inform a more educated debate about the place for police and their impact on our communities, we had to get comfortable with the codebase. You can find a forked version of the up to date repository here. As I started poking through the files, there were a couple of folders that jumped out to me:
- A folder called Storybook. This is library UI tool for mapping out component flows in Javascript applications written with React, Angular, or Vue. We didn’t touch it for the duration of the project, but it seems versatile and like something I’d be interested in playing around with in the future.
- The components folder — where all the bells and whistles in a React webpage live — was divided into two subfolders, pages and common. It turned out that
- The Ant Design module was incorporated into nearly every component. It’s a styling library with prefigured components I’ll talk about in more detail later.
I ran into an issue spinning up the repository for the first time due to CRACO, a Create React App (CRA) overlay for customizing deployment settings. It turned out that we were missing a key for MapBox, which was the API responsible for plotting the incidents our Data Science guys were scraping from Reddit and Twitter onto a display of the United States. Jason, another web developer, determined the issue was a missing .env file in our root directory.
When I finally managed to npm start the application here’s what I saw:
At the start, I was equally eager and anxious to begin contributing to this project. The nature of this project is clearly a very sensitive one, and portraying the facts in a clear, equitable, and informative way was of the utmost importance.
From the get-go, there were a multitude of questions that needed answering: what new features can we make, that would advance the HRF mission? How would we define delegate the various tasks our development? Our second week would be devoted to answering these questions by formulating a strategy for implementing some innovations to the existing product.
Planning for Change
I and my fellow front end developers were off to the races on the second Monday
We worked extensively with the task management tool Trello to define the features and their technical requirements . We began divvying up our work.
After brainstorming several possible features, we settled on setting out to re-outfit the spaghetti line chart altogether.
We decided that for one, the display wasn’t the most conducive for comparing the different categories of Police UoF over time — a stacked bar chart would be more suitable for that task.
With that in mind, I went about drafting up a new view for the timeline d using Whimsical, which is a handy tool for wireframing new features and understanding user stories. This would serve as a reference as we went about updating our various components.
With a clear image of what we would be making and a well-defined path to get there, I felt comfortable going into the third week that our team would be able to make substantive additions to the existing deployment for Human Rights First.
Walking the Walk
“Justice is truth in action.”
— Benjamin Disraeli
Let’s take a look at just one of these decisions, the obstacles they manifested, and how we were able to implement them. For the sake of brevity I’m only going to address the first couple of features here and will save the rest for a more technical assessment to be written up down the road.
The first step of changing the bar graph was simple. instead of importing the Line component from the Chart.js library we brought in the Bar component, and in the chart’s options object we added the key: value attribute of “stacked” : True for both the X and Y axis of the graph. The result looked like this:
However, the new visualization is far from complete. As I’ll talk about in my next post, the Redux state management was never fully synchronized with our user interactions with the application — re-renderings of the graph lagged one interaction behind the user’s actual inputs. That is to say, we never achieved a Single and Representational Source of Truth for the app. Nonetheless, it was an invaluable and informative exercise in developing an integrated state management systems for a static website that laid solid groundwork for creating a more dynamic MVC down the road.
Looking Back
Altogether, we managed to substantively reimagine the repository that we had been handed in October. The main changes that we successfully implemented for our application were as follows:
- Converted the spaghetti line graph into a stacked bar chart
- Deployed a web application through AWS Amplify
- Created a Single Source of Truth for app state with Redux (sort of)
- Implemented a filter for customizing the parameters of the bar chart
- Created a submission form that report new incidents of police use of force
- factored out over 1,000 lines of dead code
Not too shabby for two weeks of hands-on-keyboard coding. My experience architecting a more holistic implementation of HRF’s visualization of the trends in the use of force by American police has been equally humbling and empowering.
Team F was one of six that presented their new features to Welton, the stakeholder at Human Rights First, and we were wowed by the sheer variety of implementations the other teams had come up with. A new sign up and log in feature for creating user accounts, an entire redesign of the UoF application’s User Experience, and new data visualizations for informing the public’s understanding of how police engage with American communities.
The prospect of HRF actually incorporating some of our features into their live deployment thrills me. I’m especially happy with the new UoF incident objects we collaborated with DS to develop. They are more concise, the schema is more intuitive, and the tag system they innovated will make assigning categories (singular or multiple) to new incidents a far more achievable goal.
When HRF begins integrating our changes into their master branch, there are still plenty of questions for future developers to answer. Primarily, I believe they will need to develop a more cohesive state management system. We didn’t fully succeed in getting Redux hooks working, in part due to a missing categories field in the incidents objects. This would be the first place I would look for completing the functionality of our new graph component. In particular, I believe that refactoring the existing code with Redux Hooks like
If I could do it all over again, there are a number of things I would have done differently. For one thing, I would have moved away from the Ant Design UI library altogether — while their widgets have expansive capabilities, their implementation uses attributes to define component roles, which becomes klunky when you’re trying to manage the app through a universal state store like you do with Redux. Additionally, the documentation is lacking a lot of cohesion and can be hard to follow along with — I frequently found myself referring to Code Sandbox for reference. As an alternative, I would consider using the more traditional Bootstrap or Material UI component libraries.
Lastly, I would’ve sprinkled more documentation throughout our repo, to make traversing it and understanding the inner workings of its components easier for future developers. Even for one’s own understanding, its important to reflect on the contributions one made, to give perspective on what could be done to improve the existing logic.
Altogether, I am so grateful to have had the opportunity to work towards furthering the Human Rights First mission, so that together can get a clearer idea of the challenges we face when expressing our civil liberties, and to take the lessons of all of our pursuits and apply them to our future efforts.
In the end, I’m walking away from this project with a newfound appreciation for the efforts of the global community to build a better future — both the people pushing for progressive ideals and a more equitable future, and for the institutions, technologies and methods developed by generations of our fellow human beings.
Moving Forward
“The arc of the moral universe is long, but it bends towards justice.”
— Theodore Parker
I have only taken our first steps on the journey to stop injustice in its tracks. You and I are each a finite piece of a grandiose whole, and its our unending duty to understand and reimagine our collective relationship with the world: assessing the litany of errors and oversights of our foremothers and forefathers; amending failures of governance and common decency; healing the illnesses that have beset our people and our planet; rooting out and purifying corruptions of power; teaching love to those acting out of hate; unravelling the mysteries of our shared cosmos.
We’ve found ourselves at an existential crossroads, my dear reader, and its called the present. Each and every one of us has been given the incredible gift of right now— a window into time where we I believe that’s our duty — to understand ourselves in relationship to something greater, working together in the name of a more equitable, more just, more vibrant, more prolific world.
As for me, I’m stepping back into the job market, incredibly excited to take my new skillset into the public to contribute my enriched understanding of the intricacies and complexities of Full Stack development to our collective effort, and looking forward to taking on a job that lets me work with purpose.
This piece was contributed by Alex Goncalves, a Philosopher-turned-Full-Stack-engineer fascinated by the countless ways technology informs our societal potential. I am a firm believer in moonshots and advocate of OOP, SaaS, cloud computing, and Virtual Reality. I write to further my understanding of the foundations of Computer Technology and its most cutting-edge applications and to collaborate in the development of pragmatic solutions to distributed problems.
If you’re interested in blazing-fast breakdowns of new technologies, in-depth discussions of our categorical imperative, or diatribes about the latest cultural artifacts, feel free to check out my blog at schroeder-g.xyz or shoot me a message on twitter @don_mikado.