Visualizing Hate Crimes in the USA: Two Lenses of Understanding
By: Katherine Lordi
Tags: Data Visualization, Hci, Hcd, Data, Graphs Are Fun

Brainstorming

In order to generate as many ideas for our data visualizations as possible and start narrowing down our ideas, our team utilized Sheet 1 — Brain Storm.

Generate Ideas: Sketches

Below are some of our team’s preliminary sketches for both the clear communication and persuasion piece. In this sketching and brainstorming step, our primary focus was figuring out which data (ie. rows and columns) to present and how to present it in a way that users can look at it and quickly while learn something impactful about hate crimes in the USA.

Preliminary sketches that helped our team visualize meaningful trends from our first data set on Hate Crimes in the USA. NOTE: After struggling with this data set due to discrepancies in years, averages, and hate crime measurements, we decided to use FBI Hate Crime Statistics instead.

Graph #1 shows how hate crimes in different states change over time in the form of a line graph. Graph #2 shows agency report rates submitting hate crime incidents for different states as a bar graph.

Graph #3 shows how the % of types of bias motivations of hate crimes changes over time as a line graph. Graph #4 shows is also a line graph but shows % of victim types.

Sketch #5 shows on a national level how the number of hate crimes in the USA changes over time (from 2008–2017). Based on these sketches above, our team sought to utilize these relationships and others in our final products for clear communication and persuasion.

Filter & Categorize the Sketches

After generating many possible ideas of chart and graph ideas for visualizing meaningful data trends through sketching, our team (2) filtered and (3) categorized the charts/graphs/sketches in order to identify which data visualization they best belong — clear communication or persuasion.

Sketches (Graphs/Charts) for Clear Communication:

Line graph showing changes in the number of hate crimes per 100k population versus time for each state (each state has a different color line)

Bar graph comparing states that displays data about the number of agencies submitting hate crime incident reports versus the total number of participating agencies (agency report rate)

Pie chart (or line graph if including change over time) showing average percentages of different bias motivations and victim types for hate crimes

Line graph showing how the total number of hate crimes in the USA changes over time (2008–2017)

Sketches (Graphs/Charts) for Persuasion:

Interactive U.S. Map displaying changes in number of hate crimes per 100k population over time (2008–2017)

Line graph showing how the total number of hate crimes in the USA changes over time (2008–2017)

Scatterplot showing bias motivation and victim data over time (2008–2017)

Combine and Refine: Sketching the Dashboards (User Interface)

In the combining and refining step, our team focused on the dashboard designs for both clear communication and persuasion.

The dashboard is important because it serves as the user interface and is what the user interacts with. It also organizes the collections of charts and graphs that visualize the FBI Hate Crime statistics.

Therefore, our team created the dashboard with an HCD approach in mind.

Dashboard (User Interface) Design

In the designing of the dashboard, our team considered Andrew J. Ko’s Theory of User Interfaces.

Two key takeaways that our team drew from Ko’s theory for our dashboard design are the importance the gulf of execution and affordances.

Since the goal is to narrow the gulf of execution — or knowledge gap — that people face when working with user interfaces, our team decided to make our dashboards as simple and text minimal as possible.

This is reflected in the dashboard sketch below.

Dashboard sketch. Our idea was to surround the title with the graphs/charts so that data is presented cleanly and simply on the dashboard.

Affordances are also importance because they prompt user interactions to produce a desired effect.

Our team took these affordances into consideration while designing the interfaces in tableau and where to position affordances that control aspects such as time and state filters.

Colors

In thinking about the color scheme for the dashboards, we wanted to keep the colors consistent for clear communication and persuasion so that they go well alongside one another.

To go along with the themes of hate crimes and politics, we chose the colors red, black, white, and blue for our color scheme.

Text & Font

We considered methods for choosing good fonts for complex data.

One major takeaway is the importance establishing a data hierarchy through type size, as larger and bolder texts indicate headers while smaller texts note content.

Through using different text sizes, colors, and boldness in this way while considering dashboard design, we designed a more readable and user-friendly interface for our data visualizations.

Arrangement & Organization

In the brainstorming process, we thoroughly considered how graphs and charts are arranged on the dashboards for clear communication and persuasion to tell a meaningful story.

For example, when users view the clear communication dashboard, we want their eyes to flow in a natural order that makes sense and tells a coherent story.

Additionally, for the persuasion piece, our low-fi designs (shown below) was to have two graphs on top of one another because when we move the animation of time that moves from left to right, we want the user to see the changes in hate crime data for both graphs simultaneously.

In the sketch below, we want the user to see the progression for bias motivation (we changes that to total hate crimes per 100K individuals on our final viz) as the concentration of hate crimes in different states changes over time.

Sketch for the dashboard for design for persuasion, with the arrangement and position of the graphs as a major consideration. Placing one graph on top of the other helps the user see both simultaneously and the effects of the time animation simultaneously.

Question

Before moving onto drafting initial designs, we asked ourselves the following questions.

Do the brainstormed graphs/charts for the clear communication piece tell a complete and accurate story of hate crime statistics in the USA?

Do pairs of graphs/charts and animations tell an interesting and coherent story about hate crimes in the USA? How would viewers perceive it?

Our team ensured that we generated enough ideas to answer these questions confidently to create a successful data visualization for clear communication and for persuasion.