Human rights first is a non-profit organization that is striving to uphold human rights. They expect the leaders of our country to uphold and protect the rights of their citizens. When the leaders fail, Human Rights First takes the initiative to press our leaders to demand ‘reform, accountability and justice.’ Read more about Humans Rights First here.
Our point of contact is Welton Chang. A super charismatic and passionate person, Welton runs the helm as the Chief of Technology Officer. As a stakeholder, Welton knows exactly what he wants from the developers. The target audience: reporters. With this in mind, we began road mapping our project.
The specific task at hand we decided to take on was being able to display information about the amount of instances of police use of force.
The wireframe would be simple, and clean, easy for reporters and journalists to use.
Our architecture was fairly straightforward as well, with only 2 front end developers and 3 computer scientists.
After we finished the architecture, we set out to work on the trello board.
After a week of planning and brainstorming, we set off to make an app. I decided I wanted to work on making a graph to display the amount of police use of force per month. It would be a simple graph that would display all the data needed for research. The biggest hurdle needed to jump was learning a new library to make a graph. I have even thought about how to make a graph with react. I googled the best libraries and decided to use Victory Charts.
The learning curve wasn’t too steep. I read through the documentation which was fairly simple. The only difficulty was navigating the graph lingo, like domain and axis. Once I displayed a simple graph, then I worked on inputting dummy data to make sure I could at least get something up our data scientists did not have time to get an api up for us.
After getting a draft of what the app would look like, our data scientists came through with an API. It was just a large array of JSON objects. No end points. So, the next hurdle was figuring out how to navigate through the data to pull out what we needed.
In the end, we successfully displayed all the data available to us in a readable and efficient way. Keeping in mind that journalists and reporters were our target audience, I decided to style the mapped data to look like a newspaper article.
A simple grey background, with an eye catching title. Above the title, in a newspaper style, the date of the incident is displayed. Simple and clean, not getting in the way of the data.
Main Feature
There were two hurdles for me to jump as far as implementing the feature I decided to work on. The first, was parsing the raw JSON data.
At first glance you might notice the hurdle I have in mind. The first thing I noticed was what took the longest to navigate, the “src” value. The “src” value is a string of an array of url strings. To display these links correctly, we first needed to map through all the data, then split the “src” array. After that, splice out the first and last two elements in the string, the quotation mark and bracket. Once we had that done, we could join the string then split again by commas. Only then could we display the sources of each data point.
The next, smaller hurdle, to overcome was how to display the date. This was a quick google away from displaying the date the way I wanted. I needed to create a new Date instance of the the key “date”. I was then able to turn that into a string and split by spaces. I named each index day, month, date and year so I could display them easily. The end result being something like “Tue, Nov 17, 2020”.
Throughout the whole project, the hurdle I had to constantly be navigating over has been working with a library I haven’t worked with. I’m of course talking about the charting library, Victory. At the end of working with this library, it was actually easier to work with than I had realized. The whole library is documented nicely on their site, as I linked above. The first decision was which graph to pick. How to show off the data. At first I decided on a line graph with a brush graph right underneath. A brush graph allows you to zoom into a particular data set, in this case time, on the bigger graph above. Eventually I decided to keep it simple and remove the brush graph because I felt like the zoom feature was not useful for this project. I then realized I needed to be able to show data at a particular node on the line graph. Victory makes it easy for you to make a line graph with a scatter graph on top to make it seem like each change in data has a node. Each node has a value, the number of instances per month. The node value is shown as a tooltip, a simple feature that’s included in the Victory library. The end result is right below
After being able to display a graph, I then needed to be be able to display multiple line and scatter graphs to indicate which type of force was used that month. So first I worked on mapping through all the data and condensing the types of force being used in each instance. I found 7 types of force. After that I had to make the checkboxes also function as a legend. A simple and elegant way of doing that is underlining each checkbox with the color corresponding to the type of data that is being shown.
Now that we had our data plotted, we needed a way to display all the evidence given to us by our data scientists. We decided to make an onClick event on each node on the graph. Remember, each node already displays a tooltip of instances that month. So, when users click on the node, they should be able to see every instance that month. The decision now, how to display it. At first, when we laid out the road map for this project, specifically on the wireframe, the idea was the display the data above the node. I didn’t make a whole lot of sense to do that as we finished the look of the graph. My other frontend developer then had the idea to just display it under the graph in a light blue container.
I then had the idea to make this container a bit more nuanced. Since our audience is geared toward researchers, journalists, and reporters I decided to give the displayed data a newspaper feel. I made the background light grey, gave each title an article vibe, and displayed all the data in a column. This gave off the effect of an online newspaper.
The future of the Human Rights First
I am very pleased with what we have been able to accomplish. We were able to secure a fair bit of data. The data science team was able to make sure the data is updated every 24 hours. The frontend team was able to display the cards successfully, the stakeholder really liked the newspaper article feel.
The next team will need to make sure the graph can display more than just a year of data. The next team can also work on some transition animations to make the graph appear more professional. There could also be some transitions on the data that get displayed.
Overall, I have had a great time working on a real project with a stakeholder. It gives meaning behind everything we do. It makes you feel like you are working towards something bigger than yourself.
I hope to find a team where I can feel that way everyday soon.
