Millions of people are harassed every year – at our schools, on the streets, and in our cities. Many of these people report these issues, only for the reports to get lost in the endless stream of data flooding our world. This weekend, we decided to #HackHarassment by creating a resource that police, principals, counselors, HR, and other people in positions of power could use to input anonymous data on situations involving physical or emotional trauma caused by harassment. By studying our real-time data visualizations, everyone – from researchers to kids – can use our tool to learn about trends in harassment and personally address the effects of harassment in their own communities by taking action.

What it does

Our web application uses the Typeform API to grab JSON data from our curated survey results to create data visualizations (maps, charts) that are updated in real time as survey results roll in.

How we built it

Besides using the Typeform platform and API, we used Javascript’s jQuery and AJAX calls to parse Typeform JSON data for data analysis. The web application was designed using front-end languages JavaScript and HTML/CSS, while the data visualizations were created using MapBox/Leaflet plugin as well as the vis.js JavaScript library.

Challenges we ran into

We spent a considerable amount of time figuring out how to update our MapBox data visualization in real time based on incoming Typeform submissions. One of our beginning ideas was to export our Typeform results to a .csv file, use a geocoder in the .csv file to attain values for latitude and longitude, and then import these coordinates into a MapBox dataset to plot on the initialized map. However, this proved to be inadequate. We then found out a much better way of attaining the information automatically, using an AJAX call with our Typeform’s API key and form code.

Accomplishments that we’re proud of

We’re proud to have created a dynamic web application using data visualization to help address harassment and educate people about its prominence in society.

What we learned

We developed our front-end skills as well as learned how to get and utilize endpoint data from both the MapBox and Typeform APIs.

What’s next for Map Harassment

We’re planning to add a support system for people to insert and respond to positive messages on the website. We will also add more visual data in the form of bar graphs and scatter plots. Furthermore, we need to add an oauth (username/password) lock to the Typeform so only counselors, principals, police, and HR, etc. will have the ability to open it for users, eliminating the risk of skewed, faulty, and malicious data.

Share this project: