⭐ CHECK IT OUT stop-aapi-hate-dashboard.vercel.app

💡 Inspiration

As Asian American students, we have had first hand experience with the struggles of being an Asian in America. We have been subjected to bias in the United States for a long time, but with the rise of COVID-19, Anti-Asian sentiment has dramatically increased. We feel that it is important that more Americans are aware of the attacks against the Asian-American community today so that we can strive for a better future. This inspired us to create vizAsianHate, a website where you can get up to date visualizations on statistics of Asian Hate attacks in the United States.

🖥️ What it does

vizAsianHate provides up to date visualizations of Asian Hate statistics in the US.

3D Map

3D Map

The first visualization is an interactive map that shows location markers for reported Asian Hate attacks in the past 15 years. Users can choose which year they want to view and can also view short descriptions and news articles on the specific hate crimes. The purpose of this map is to give insight into how drastically Asian Hate crimes have increased over the past few years and a broader understanding of how widespread Asian hate crimes are around the United States. We want to make sure the audience know that these hate crimes did not occur in only a few specific areas.

"Bubble" Graph

Bubble Graph

The next visualization is a Bubble Graph. The various bubbles represent different Asian hate crime incidents. Each bubble gives a brief description about the incident, including the location (city, state) and the type of hate crime. The purpose of this bubble graph was to put into context a rough estimate of how many Asians experience harassment from others solely due to their race. By giving the platform for these stories to be vocalized, we hope to put in perspective the severity of these crimes and how it is truly an issue.

Politicians on Twitter on AAPI

Politician Chart

This visualization was a horizontal bar chart. Researchers during the first eight months of the quarantine collected tweets regarding AAPI topics from politicians and classified them into various groups. As seen politicians sure had a lot of negative to say on Twitter at the time! Interesting trend going on as well looking at the political parties...

Interactive AAPI Twitter Analysis

Politician Chart

This visualization involves two different visuals, a word cloud/tag and a pie chart. Users can select a given query from a list of trending AAPI queries to retrieve tweets from twitter which are analyzed and visualized on the charts. The word cloud shows what are the most prevalent vocabulary words used throughout the tweets through their size. The pie chart uses Vader sentiment analysis to determine the all of the tweet sentiments and graphs them based on the count of positive, negative, .etc. Based on this we found that this is a very indeed controversial topic with many queries returning strong vocab as well as close to primarily negative sentiment reports.

California Anti-Asian Hate Crimes vs. COVID-19

California Graph

The next graph shows the correlation between anti-Asian hate crimes and COVID-19 infection rates in California between January 2019 to September 2020. The red line intersecting March 2020 indicated when the lockdown mandates began taking place around the United States. In March 2020, infection rates significantly increased and by the end of the month over 8000 people were infected. At the time, people began to panic and buy extra groceries, fight over hand sanitizer, and, most unfortunately, pin the blame of the virus on Asians. As seen in California, hate crime reports shot up from 4 to 17 once COVID cases began to rise. That is an absurd increase of 325% in 1 month! Over time as cases grew, however, the line of hate crimes is seen decreasing. There are multiple potential factors that we considered to interpret this data:

  1. Not all hate crimes are reported to the police due to limited English proficiency and the inability to report a hate crime in their primary language or a distrust of the police. Therefore, the real numbers may not be reflected in our data.
  2. As the lockdown progressed over time, less people were outside and less hate crimes were reported as a result. Nonetheless, the increase is unignorable and the issue has become a deep issue in America. Victims of hate crimes often do not report their victimization to local LEAs, resulting in the underreporting of hate crimes. This underreporting impacts the hate crime data received by the Department of Justice, resulting in an incomplete picture of the hate crimes committed within the

Anti-Asian Hate Crimes in Cities

City Graph

The next bar graph shows the number of anti-Asian hate crimes in 12 cities in America and Canada. From 2019 to 2020, hate crimes increased in all cities, and this also shows how racism and Asian hate is also a pressing international issue. The false blaming many people placed on Asians has negatively impacted the lives of many Asians.



The timeline is the final visualization that depicts how even political leaders in the United States are showing signs of being anti-Asian. Various political figures are seen to introduce Acts and laws that obviously negatively affect Asian Americans and Asian immigrants, specifically from China. Laws such as the “SECURE CAMPUS Act of 2020” and the “Holding China Accountable Act” prohibit Chinese nationals from visits involving studies in the fields of STEM. These anti-Asian politicians justify their discriminatory acts/laws by using Covid as an excuse. The purpose of the timeline is to portray to the viewer how politicians have also expressed some form of Asian hate crime, whether it be obvious or not.

🎨 Design

We used Chakra-UI to build out our front-end. For the design we kept in mind that this was an AAPI based project, so we decided to copy the AAPI color palette, using primarily gold. We took a lot of inspiration from https://stopaapihate.org/ and went for a bold, clean, and straightforward approach with our design. To convey this, we used a black background so it contrasted and sort of "made a statement". Also because dark mode is just better :)

🛠️ How we built it

Our stack that we used to build vizAsianHate consists of React, Next.js, Chakra-UI and Vercel. Our map visualization was built using Mapbox's API. The bubble graph was entirely coded from scratch. For most of the graphs and charts we used recharts which is built on top of D3.js. We collected our data primarily through stopaapihate.org, news sources such as CBS and NBC, and public datasets released by governments such as the NYPD and California Government. Additionally we collected live data from Twitter through the TwitterAPI.

⚠️Challenges we ran into

One of the challenges we ran into was using NextJS and React with our website. This was new/rough territory for all of us, so it took sometime to learn all the caveats of the framework and get our website working. One of the most annoying challenges was finding and cleaning the data. In the future we hope to have better luck finding better datasets and will make sure to at least make a scraper. Another challenge we ran into was implementing Mapbox's API into our website. Although Mapbox's API Documentation was very well written, it was very large in size and somewhat overwhelming to go through and learn in such a short amount of time. Finding libraries to help us graph all of our data was also tough, D3.js was too complex given such a short amount of time, and some other mini ones such as ReactWordcloud just broke our entire application. Fortunately we were able to find alternates such as recharts in time to create our visualizations.

🏆 Accomplishments that we're proud of

Some of the accomplishments we are proud of is learning how to use NextJS to build a website. Although it was difficult to get setup at first, using NextJS greatly simplified the process of creating our website as it provided very useful benefits. Another accomplishment that we are proud of is learning how to use libraries that we have never used before, such as Mapbox, Recharts, and more. Finally, we are proud of the fact that we ran into minimal GitHub merge conflicts during this weekend as those are very annoying!

🧠 What we learned

We learned how to utilize of multitude of new libraries and frameworks such as Mapbox, Recharts, ReactJS, NextJS, ChakraUI, and more. All of these simplified the process of making vizAsianHate and allowed for us to make amazing vizualizations. Additionally we learned a lot from the workshops this weekend and process of learning how to make visualizations :).

🚀 What's next for vizAsianHate

In the future, we would like to expand the amount of visualizations on vizAsianHate. In addition, we would like to increase the amount of data in our visualizations for more accurate interpretations. We would also want to introduce AI powered parts to our website for more insightful information.

📊 Datasets

Built With

Share this project: