Looking Down the Barrel: Gun Violence in America
Each year, many Americans lose their lives due to gun violence. Using publicly accessible data on causes of death in 2015 from the Center for Disease Control and Prevention we present an interactive visualisation for understanding the how these deaths are distributed across various categories.
Each
represents 100 deaths. Click the buttons on the left to group deaths by different categories. The last at each category have been rounded up to the nearest 100.
Choose a category to group by:
In 2015, 0Americans died from gun related injuries
Notes about the Data
In category "Location Type", Other Specified applies to places like: Parking lots, Mountains, Rivers, Trailer Courts, Docks etc. Click here to see the full list.
Design Rationale
We initially started out with gun death data over 10 years from 2005 to 2015 that we parsed from the Center for Diesease Control and Prevention (CDC). Our goal with the interaction was to allow our audience to gain a better understanding of how gun deaths are distributed over various categories such as ethnicity, age and location. Because we had data over 10 years, we aimed to show a trend as well. So we initially explored a mix of trends and the ability to zoom in on a particular year to see how gun deaths in that year were distributed. However we ran into problems allowing for more details when focusing on a particular year. Since we had wanted to encode each death as a single unit circle, with 10 years of data and 35000 deaths a year, we would have to load 350,000 svg elements which caused major drops in browser performance. As a result, we decided that we could convey the state of gun violence today using a single year and used the latest data (2015) from the CDC. We sought to create a visually compelling and attractive visualisation, and initially decided to present a big giant blob of circles where each circle represents a single death. When grouped by a particular category, each circle would regroup into sub-blobs of circles. This way, each death was made more compelling as each death was represented. However, 35000 circles also created issues with performance, so we decided to make each circle reprsent a 100 deaths. We also noticed that having the giant blob split into smaller blobs for each category was not a good visual encoding for comparing between each attribute because area is inaccurately perceived by people, especially when comparing between areas. This is made worse by the fact that the blob resembled a circle which studies have shown are not good for comparison. As a result of this, we decided to let the blob regroup as bars instead. So on grouping, the tiny circles would regroup into bars, forming bar charts. We also explored letting the audience group by any combination of categories presented. However we realised that we did not want the audience to have too much room for exploration as that might convolute our main message. Furthemore, with too many options in category selection, each group might become too complex as the number of categories selected increases. This might make the data more confusing than it should be. We realised that it was more important for us to do most of the exploration and present the data with a limited selection of categories for the users to choose from. Another reason is that as the number of categories selected increases the number of possible groupings becomes exponential. Taking all these into consideration, we eventually decided to present six main categories to allow the user to group by, but one at a time. The blob would rearrange into individual bars for each attribute in a category. As we saw our visualisation take place, we noticed that for bars with less circles than required to fill a full row, it was hard for the user to make a clear comparison among the bars. With this in mind, we decided to add a small horizontal axis at the bottom of each bar, that clearly indicates the length of a full row. So even for a bar that only has a few circles, it is evident immediately how much less they have compared to other bars. We also decided to add a vertical axis, on the side of the bars as this gives the user some perspective on what it means for circles to stack up into a bar. Basically reinforcing to the user that the vertical height corresponds to the number of gun deaths. We then decided to explore a more visually compelling way to introduce the data. That was how we came up with the spilling of the dots from the middle of the page, with the counter rising very quickly to lend more weight to the number of gun deaths each year. We also used a color close to blood red to paint a more serious picture of the situation. The counter, the circles spilling out and fading from red to black creates a more visually dramatic introduction, hooking our audience into the visualisation, and then allowing them to group them into various categories presented. In addition, we decided to vary the width of bars for each filter so that the data fits nicely within the viewing frame. Since we are only comparing attributes within categories, this change in width of bars between categories should not affect how the visualisations are perceived. Finally, we decided that to aid in ranking the bars for each attribute, it would be best to rank the attributes in each category, starting with the highest on the left and the lowest on the right. This provides an additional encoding of position on top of the primary encoding of size and spatial encodings to illustrate the number of deaths for each attribute in a category. In addition, for the category of "Location Type", we separated "Other Specified" and "Other Unspecified" from the order of rankings as these non-specific attributes can create confusion when viewing the data.
Development Process
The group as a whole discussed the visualisation and interaction design. We split the work into three main aspects: data parsing and cleaning, UI design and development and D3-related development. Data parsing and cleaning was done by Will and Zack while the main D3-related development was done by all members. UI design and development including HTML and CSS was done by Zack and Will. The group met up and did two 6-8 hour sprints together which made working together fast and efficient. There was a lot of discussion about the "right" visualisation and interaction to use and some were definitely heated. This definitely aided in exploring various visualisations and selecting the best visualisation we could all agree on. We used applications like Trello to help monitor tasks and log bugs or features that we wanted to add. This way everyone was on track. One of our team members was in charge of maintaining the board and making sure all deadlines are met. We spent approximately 75-80 hours on this project, about 65 hours of this on the web development visualisation and the remainder was spent on data cleaning and parsing. We spent most of the time figuring out how to apply D3 libraries to effectively deliver our desired visualisation. Creating the animations and making them transition seamlessly with one another was also a time-consuming process.