Kevin Weinhold, Tanay Gandhi, Andrei Li
Our goal was to display information about police shootings in the United States organized by state and by the demographics of victims. Users can click on a state on the heat map and then see a pie chart pertaining to gender percentage, a bubble chart pertaining to race demographics, a line graph pertaining to shootings frequency, and finally a novel visualization depicting the victims in rows upon which users can click and see more information about the victims. We feel that our visualization gives users a better grasp of the demographics of the victims and allows them to see trends in gender, race, and location.
Link: https://corgis-edu.github.io/corgis/csv/police_shootings/
Our dataset came as a CSV from CORGIS and depicts data about the victims of police shootings in the United States. The dataset includes 16 keys ranging from the victim’s name to the incident’s location as well as details about the shooting including whether the victim was armed, mentally ill, or if a body-camera was involved. We processed the information by state before creating each visualization. For the race statistics, a count of each incident per race was taken and made into its own data frame. These details from the dataset gave us a clear way to depict common trends of police shootings in the U.S..
The objective of this project is to depict to users trends within the dataset that can give them a better idea of the statistics and details of groups of people who have died in police shootings. In order to achieve this, we considered a few major factors that could indicate police shooting trends: race, gender, mental illness, and location. To our surprise, every single entry in the large dataset indicated that the victim was indeed mentally ill. Because of this, we did not bother visualizing it because it would not change from state to state, but it is a very important and telling point to mention.
Our tasks were to visualize each of these factors in their own unique way so that each statistic would stand out to users. The heat map would show the frequency of shootings per state and the line graph would show it over time. The task of the pie chart was to emphasize the overwhelming trend of victims being male and the bubble chart offered a visual way to compare the proportion of victims by race. This component was an important task because race-relations in the U.S. play a major part in police shootings statistics. Finally, the novel visualization had the task of depicting the victims as their own person image, where users could click and learn their name, age, and date of their death.
Overall the visualization has four parts which will be broken down as follows
Top left: U.S. heat map showing the density of shootings per state. As indicated by the color scale, states with lighter colors include more shootings and those with darker colors indicate a lower number of shootings. We chose this scheme because heat maps are easily identifiable as showing frequency of certain events per region. Users can interact with the map by clicking a state. Upon clicking, the additional visualizations (described below) will be displayed. Users intuitively know to click on a state because on hover, they can see the state colors change. The map acts as the main visualization upon which the others hinge. When clicking the state, the pie, bubble, line, and novel charts are passed the abbreviation of the state passed and each is able to filter the data through this. In order to display this map, we utilized d3.geoAlbersUsa() as covered in a previous homework. Colors were generated by a sequential scale.
Bottom Left: Novel ‘In Memory Of…’ graphic. In this visualization, upon clicking a state from the map, an animation plays where each victim of that state is depicted as a person svg. Hovering over the svgs turns them red which indicates to users that they are able to click on them. Upon clicking an svg, the name, age, and date of their shooting is displayed. The data selects all cases that occurred in the selected state and omits cases without names. We chose this as our novel visualization because it brings back the individual to the story. We don’t want users to simply focus on the overall demographics, but also the details of each case. Clicking on a person’s svg encourages the user to research the person and their story and how they unfortunately died in police shootings. This visualization was created by appending an svg for each person that died and translating it based on the spacing of the box.
Top Right: Distribution of victims statistics by gender and race per state. The interaction for this visualization happens when a user clicks a state. The functions to draw the visualizations are triggered and the data is filtered based on the needs of the visualization. The left side of this visualization is the gender pie chart. We decided on a pie chart in order to show the large disparity between male and female victims. The function d3.pie() helped us create the pie chart. The right side is a bubble chart. We feel this design emphasizes the proportion of victims by race. Users can take the proportion of the bubbles and consider the proportion of the total population in the U.S. of a particular race and how that compares to the victims in police shootings. Users can hover over the bubble chart to reveal a pop-up that shows the race and count of victims from each demographic. In order to create the bubble chart, the functions d3.hierarchy and d3.pack were used to determine the x and y positions as well as the radius of the bubbles.
Bottom Right: This is one of the more straightforward visualizations in the dashboard. It depicts the number of shooting incidents in the selected state over each year represented in the dataset (2015-2021). There are two HTML select elements at the top of this visualization section to choose genders and races to visualize, and each change automatically updates the visualization. The race selector is a multi-selector, allowing a user to visualize distributions of multiple races at once. The user can interact with these elements and change the visualization by decreasing or increasing the volume of data being displayed. Like the other two visualizations, this is linked to the rest via the interactive heatmap. The data displayed is of the selected state from the heatmap. Users intuitively know to play around with selecting attributes in the dropdown without being told that they update the visualization.
In the initial proposal, we designed 4 visualizations. A heatmap of the US depicting shooting incidents in each state by year (with the year being chosen by a slider), where each state can be selected to populate the rest of the visualizations. Two pie charts would show the proportion of 2 attributes: race, and mental illness status of victims. A line graph would depict the frequency of police shooting incidents in the selected state over time, with 3 selectors allowing the user to analyze specific genders and races. A custom SVG visualization would show the proportion of incidents recorded by body cam footage and incidents without body cam footage. Finally, an enlarged map of the state itself was planned, to illustrate the locations of specific shooting incidents.
Most of the heatmap remained the same, however due to the low number of incidents each year, we removed the year selector. The mental illness pie chart was scrapped due to every value in that column in the dataset having a “true” value, rendering the chart useless. Thus, one pie chart was changed to depict gender distribution and the race pie chart was changed to a bubble chart to depict proportional comparisons. A mouse hovering tooltip was added to this visualization to be able to view values of smaller bubbles. Similar to the mental illness pie chart, the bodycam visualization was scrapped due to every value being “true.” This was replaced by the novel visualization of custom person SVG’s showing every case in the selected state. This visualization is interactive and allows the user to select a specific icon and read details about the victim it represents. Finally, the state map visualization was scrapped, as we were not able to fit all five visualizations on a single page, and it would’ve become a visualization of population distributions, since most incidents occurred in each state’s urban centers.
The goal of demonstrating the vast number of police shooting incidents and their attributes remained the same throughout this project. The original proposal was fairly realistic, aside from the two visualizations that became infeasible after we realized the data was not distributed well. Next time, we will do more pre-processing of data before planning the project, in order to understand how it is distributed and any attributes that are not possible to distribute. This would also allow us to better plan how the data should be wrangled and represented.
Tanay Gandhi worked on the initial sketches of the dashboard, including the layout and initial visualization concepts. Once development began, Tanay implemented the scatter plot, linked it to the dynamic state selector, and refactored the script files to logically connect to each other. Included in the scatter plot development was implementing the gender and race dropdown select elements.
Andrei Li built the interactive heatmap and novel visualizations. The heatmap required wrangling the data to sum up columns and depict the data on a color scale. This heatmap is the main visualization of the dashboard and is interactive by allowing users to click on any state and get other visualizations for data in those specific states. The novel visualization that Andrei built draws an svg of a person for every shooting incident in that case. This visualization is also interactive, as the user is able to click on any of those svg’s and view the victim’s name, age, and date of incident.
Kevin Weinhold built the pie chart and bubble chart. Both of these are also drawn based on the user’s selected state. The pie chart visualizes the difference between incidents by gender. The bubble chart is another novel visualization that depicts the proportional difference between victims of every race. This was a visualization added after the initial design because some attributes we intended to visualize all held the same value, making the visualization irrelevant.