Design Process for SF Vehicle Theft Crime Visualization
This personal project was my first attempt at making something not only functional, but that had value derived from an elegant, intuitive, and engaging user experience. Here is a link to the working product hosted by Github. It grew far beyond the goals of my initial experiment with data processing in RStudio and plotting those points with the Google Maps JS API. In order to document the design and implementation process, I will explain the steps I took to reach the final product from the vague sketches in my head.
Brain Storming
Plotting crime as data points with Google Maps is not a novel approach to data visualization, so I explored what other websites have done to make theirs appealing or stand out from the crowd. These were the two sites that showed the most promise in terms of usability, but were not without their flaws as well.
PROS — There is a sleek interface for selecting time and date of crimes as well as the category of crime color-coded by severity. On hovering over a symbol all matching symbols gain focus to show their spatial locality.
CONS — Zooming out reveals a mess of points that allow for very little communication to the user of what exactly is going on, as points overlap and cover each other as well as names of cities and landmarks.
PROS — Grouped crimes into numbered bubbles to avoid the mistake of clumping that Oakland Crimespotters failed to resolve. Used a heatmap to communicate regions of high crime concentration.
CONS — Clicking a number bubble would reveal a poorly placed infowindow that only showed the top two crime reports. On higher levels of zoom, the numbered bubbles would not distinguish the type of crime committed, so the user would be left to try and click bubbles to find out.
First Iteration
Draft
From inspecting the original SF Crime dataset obtained from TeamLeada.com, I wanted to only use the subset of crimes that were categorized as vehicle thefts which reduced the total 31,677 reported crimes to a more manageable 1,704. The functionality of handling more than one category of crime could easily be scaled up later on if necessary and from a practical standpoint working with a smaller dataset required less time to load and process. The more important design choice was that I only wanted to focus on working with a dataset that could be plotted all at once without cluttering up the screen — without producing noise that the user would be unwilling to interact with.
A critical high-level overview of the crime data could be best visualized when separating the data set according to the districts they occurred. This was realized when generating a simple pie plot based on districts in RStudio. It would prove more insightful than just aggregated crimes presented on Trulia because they can now be associated with a major named location. Determining the relative longitude and latitude locations for the districts was achieved by averaging the geo-locations of all points belonging to each district. The scale of the district circle would be proportional to not the radius of the circle and number of crimes, but the area since otherwise a district like Inglewood (395 thefts) would have an enormous circle disproportionate to The Tenderloin (26 thefts).
At this stage, I did not try to implement displaying individual markers on higher zoom levels, but the only the district and heat map level view which would turn on and off depending on the zoom level and clicking the ‘Toggle Heat Map’ button. The district level representation would only be relevant on low levels of zoom and the heat map representation would emulate what the Trulia crime maps did well at.
User Feedback
The most helpful first round feedback I received caught a design flaw in how the heat map view of a district was being presented on hovering. Because I chose to use a semi-transparent red as the district circle, when the heat map for that district turned on, the more concentrated regions would blend in with the circle because they were colored red as well. Another problem was that hovering in and out of the districts was too jittery and caused a slight lag in displaying the heat map.
The fixes to the user feedback improved usability by hiding the red district circles on mouse clicks instead of mouse hovers.
Second Iteration
Draft
Now that I had a basic functional and smooth high-level overview of the data, I could focus on how to implement unique markers for each type of vehicle theft. There were five main types: stolen automobile attempted stolen vehicle, stolen and recovered vehicle, stolen motorcycle, and stolen truck. The word automobile was highlighted because it didn’t fit together with the other two types of theft which used vehicle instead of automobile.
In RStudio, I processed the dataset again to replace all instances of automobile with vehicle as well as some other refinements to improve readability of the description of the crime when clicking a unique marker. For instance, the time column for a data point was stored in 24-hour format, which may be handy for computers but not as readable for humans, so I converted it into 12-hr am-pm format.
Google Maps JS API allows using custom icons for their markers, so I found a set of vehicle icons on Nicholas Mollet’s icon collection. I chose colors that would be distinct enough to contrast and match the outcome of the crime.
As a bonus feature that improved the viewing experience of the project, I included a ‘Toggle Map Style Button’ that allowed you to switch between Pale Dawn and Lunar Landscape themes (which you can find on Snazzy Maps).
User Feedback
One feature that users felt would greatly improve the interactivity of the unique markers was the ability to toggle which type of crimes you could view (similar to the Oakland Crimespotters).
Another modification given that had not been suggested in the first iteration pertaining to the high-level view was setting the initial zoom level to thirteen as opposed to twelve. The reason being, at a zoom level of twelve, the uppermost districts circles would overlap each other and hinder readability. I was hesitant to change it originally because with a zoom level of twelve, some of the heat map points were hidden from the frame, but after tweaking the origin position the majority of the points could be contained at a zoom level of twelve.
The crime type toggling feature required a larger reworking of how the JSON files converted from R data frames in order to preserve a timely rendering of points. By default the rjson library stores each property of a data point in separate arrays — ex. the longitude and latitude for the 1000th data point would be kept at the 999th indices of the respective arrays. However, the way I iterated over the arrays was inefficient because it meant reaching for the elements stored in different arrays—the obvious structure was to iterate over a set of data point objects where all its properties are local to the object. Based on its district and crime type it was appended to separate 2-dimensional arrays to allow for quick reference. The same technique was applied to toggle between all the heat maps and distinct heat maps by district.
Third Iteration
In this last sprint, I wanted to hone in on the details of the user experience—the icing on the cake. What can make my crime mapping website experience better than what similar existing sites had to offer? I could not compete with Trulia’s larger dataset (to encompass crime heat maps from other cities and states) and for the same reason enough data to warrant splitting the data by day and time (the dataset acquired from TeamLeada covered only a 3 month period from 2014). Drawing on lessons learned from my Legal Studies class on Policing and Society, I thought that incorporating district biographies would add further contextual information and depth to the picture of why each district had their reported number of vehicle thefts.
My research led me to discover a wealth of historical oppression and institutional neglect in districts with the highest number of vehicle thefts such as Inglewood and Bayview. Links to read more about each district were included to emulate RSS feed readers and mobile apps like Pulse or Flipboard. Another important step to improve the user experience, now that paragraph-length text had been added to the website, was choosing the proper fonts and sizes to create a visual hierarchy. Oswald and Open Sans were chosen for headers and paragraphs respectively for their degree of readability on the web. One downside for using custom fonts is a performance hit for loading them remotely as the page first loads.
The last few touches to the website were just slight embellishes that would hopefully tie off loose ends and make it well-rounded.
On the district level view when clicking on a district, its corresponding biography would slide down on the right-hand panel instead of appearing as an infowindow in the middle of the screen over the district itself like how Trulia presented its crime info. This prevented the biography from obscurring the rest of the map and provided a consistent area where users could expect them to appear from. Clicking on the same district again would close the biography, and clicking on a different district would cause the contents of the panel to change accordingly.
On the unique marker level, hovering over a marker would slightly enlarge the icon to show focus and retain that size upon clicking to reveal its infowindow and returned to normal size upon losing focus as the current marker. Lastly, in the interactive legend window, when clicking on a symbol to hide all matching icons, the color of the symbol became a uniform black.
Final Product
Although there are plenty of rough patches to smooth out from this project, I believe after three iterations I have achieved a degree of functionality and aesthetic sensibility that has demonstrated a solid user experience. In future endeavors, I aspire to carry on the lessons I have learned from this project and continue to refine and grow my design thinking alongside my programming skills.
Thanks for reading!
