Who Are The Gun Owners?

Interactive Data Visualization

A one page interactive scrolling website, using JavaScript and CSS animations to enhance the users journey while reading through data.

The gun debate is a hot topic across America right now. It’s impossible to know the exact number of guns in American households, well into the millions. There seems to be two extreme opposing sides to this issue, with the media blasting news stories of gun violence everywhere. However, our theory was that there are probably more opinions that meet in the middle about gun control and gun rights.

We spent about 3-4 weeks researching everything we could about guns in America. There is a lot of misleading and misinformed information out there, so it was important to us to to dive as deep as possible, without bias results.

David took on all of the illustrations, while I developed the website. All design decisions were made collaborativley, and each of us had a strong role. I used Scroll Magic JS, WOW JS, and Animate.css to help enhance the users journey while reading through lots of data. This website is responsive, however, in order to have the full experience, it is recommended that the full site is viewed on your laptop or desktop computer.

This is an example of the website on desktop view. The user begins with an overview and timeline of the history of guns in America. Statistics about gun ownership are shown, then the archetypes and profiles of gun owners. Scrolling pinned sections and css animations bring this website to life.

The user can view this on a mobile device, and the css animations work, however, some of the scrolling features are disabled. The information is all there, so it is still accessible and readable to anyone.

See The Process

One of the biggest and most important aspects of this project was research. Having to parse through a lot of misinformation in order to get the hard data. Along with online research, we also sent out an online survey and conducted in-person interviews of gun-owners, so we could properly tell their story.

Once we had a substantial amount of research, we mapped out key points and areas of interest that are important in this discussion. Once we had our outline, we continued on with more research.

This moodboard is the overall tone for the website. The overall non-bias look and feel comes from the neutral color palette and the hand-drawn illustrations. This helped to create a friendly and open tone.

Our typefaces were chosen specifically represent the look and feel of the particular archetype. Fjialla One was used as the main headline throughout, with a bold, narrow body weight, grabbing the viewers attention.