A3-GavinMai

From cs448b-wiki
Jump to: navigation, search

Storyboard V1

Prototype1.png

This is an initial prototype on how the interactive visualization of SF crimes would take place. It has all of the pieces I'd like for the visualization but is lacking a little on cohesion. The way the visualization is right now includes:

  • A storyboard with point A and point B
    • A and B have variable radiuses, adjusted by A/B specific slider
  • Three additional filtering techniques
    • Filter by category (e.g. non-criminal, larceny-theft, stolen truck)
    • Filter by specific time of day
    • Filter by overall date

All of these features are listed above in an initial prototype.

Storyboard V2

3-2.png

This is a second version and view of the storyboard components. I thought about V1 overnight and woke up with some fresh ideas. Number one, I think that from a user experience perspective, having draggable and resizable circles for points A and B is much more intuitive than having two sliders for points A and point B. This improves the experience (I) in two ways. A, we have a more interactive "push and pull" visualization which humanizes the experience as well as increasing the plasticity of the visualization. B, it reduces the learning curve and helps the user get straight to playing and exploring the data.

Another change I made was the visualization of the time of day. I have twos slider to represent a lower bound and higher bound time range. The sliders range from 0:00, which is 12:00am and 24:00, which is 12:00pm the next day. At every point, I will calculate a correlational RGB color value to serve as the background color. This RGB value is the average of the lower and upper bound. For example if the lower bound is 5:00 and the upper bound is 19:00, the average time is 12:00, which is exactly noon.

Here's another example. From 20:00 (8pm) to around 6:00 (6am), the color will be darker to represent sunset and sunrise. As the sun comes out, I will increase the color to sky gradually from dark blue, orange, yellow and white and after noon, slowly go back down.

I almost chose against this because number one, I thought it increase the complexity too much in a way that doesn't benefit the user experience. In addition, it doesn't accomplish its purpose well (showing a time range instead of a single time point). For example, the previous visualization allows the user to represent any time from 0:00 to 24:00. However, what if I want to represent 23:00 to 5:00 the next day? This is a problem. One solution is to leave the lower and upper bound to be different numbers (user input). However this loses the visual aspect of using a timeline. However, at the end of the day, this timeline with a lower and upper bound accomplishes the task better than just have a single time selector. This is ultimately why I chose to continue doing this.

Next, the days of the week is pretty self explanatory. I have 7 check boxes to represent the 7 days of the week. The user can select all or none of these days, with any combination allowed.

Lastly, I wanted to include a date selector, from 4/1 to 4/15. This is only a single selector with only 15 possible choices. I think the most interesting aspect here is the ability to see how the visualization changes over the macro scale of time (days) as opposed to the micro (minutes/hours). This also explains why I chose to implement a range selector for hours while sticking to a single select on days.

Storyboard Layout

3-3.png

Here is just a visual to show the how the different filters and main visualization are locationally related to each other. The central focus is the visualization with the filters and tools surrounding it. All the selectors are on the right. The X and Y axis represent different factors of time (hours/minutes and date).

Final Writeup

So after 20 hours of grueling straight work, I've successfully created an interactive visualization program using javascript, HTML, CSS and d3. Here are some initial high-fidelity storyboard pictures. I will explain each of them in detail.

331.png So here is a general view of what the application looks like when the user starts the program. It uses a very simple design and is designed to be intuitive. The circles A and B are initially intersecting, however all the crime data points are visible because the user has not checked the option to intersect circle A and circle B yet. This is one of the filters that I ended up adding because it adds a lot of perspective in what is contained inside the intersection vs what is not. Moreover, the option to toggle it shows the contrast much more clearly than if it did not.

My visualization has the options to change the radius of both circle A and circle B in real time, as well as select specific days of the weeks to view, crime category and time. I will go into more depth with these ideas in the next picture but for now, notice how I've opted to minimize these sections to give the user easier access to all the elements without scrolling, and peace of mind at not being overwhelmed right from the initial stages. I also purposely matched the red color of the A Circle with the text to provide color context, which according to Tufte, is the fastest method of recognizing similarities. This also applies to the blue color of the B Circle with its respective text.

334.png Here, I wanted to just add that my newest version has a hint message at the very top that is hidden until the user clicks on it. The hint tells the user that the visualization is interactive and suggests an action to drag the circles around. I cannot give the user a full manual guide for two reasons. Number 1, if I needed a full guide, that means my visualization isn't good enough to the point where it is intuitive to understand. Number 2, the goal is to give the user an initial nudge and not influence their thinking too much. By giving them a gentle nudge, the user can discover things by themselves, which is one end of a good visualization.

332.png In this picture, I've opened up Day of the Week and selected Sunday, which has narrowed the data set. In addition, I've changed the radius of the circles, which promote a different perspective on the capabilities of this particular visualization. One thing that is not seen is the specific animation and feel for the program. This can only be felt through using the visualization but these different pictures help give the potential user and taste of what is possible.

333.png Lastly, I show multiple filters and change the radius more, as well as drag the circles around. This continues off my previous point of showing the broad range of discovery with this visualization.

One of the things that might need some clarification is the crime categories. I chose to bucket violent crimes into assault, robberies, basically anything that requires and often involves physical harm or the potential of physical harm to other people. Another category is non-violent crimes, which are basically things like loitering, gambling, anything that doesn't fall into the physical harm category. Lastly, there were a few items that didn't fall into either of these categories or were not specified in the data set. Thus I grouped these points into the "other" group.

Another thing that changed was how I displayed time. In my original mockups, I wanted to use a range selector for time. Upon further thought, I decided against this because the precision of a few minutes will not change drastically within an hour. In my mind, breaking up the time periods into 4 different periods offers the same benefits, if not more, in the sense that now the user has a smaller pool to choose from and will focus on the most important thing: trying to understand the data. Using 4 time groups allows this because there is less fidgeting on the range scale and trying to get it exactly right to a specific time in mind. Users can focus on extrapolating general trends and see how other filters stack up on each other and what effect all these in combination have.

Lastly, I made a similar change with the date. I originally planned on showcasing this as a filter but ended up not have enough time. Also, the marginal benefits would not have been as great as perfecting the visualization I currently have. So I decided to focus more on building the current experience to be great before trying to also incorporate the data. If I had extra time, I would have definitely done something with the date.

I probably spent around 5 - 10 hours in the beginning doing mockups and thinking about the assignment. I considered questions like "what would make it easiest for the user?", "what are the goals I want users to achieve with this tool?", and "what do I want the user experience to be from using the app for the first time to walking away from it and telling friends? Would they even tell friends?". I spent the most time after this on the implementation of the app. I don't have extensive javascript experience and started off pretty much a beginner. I used a lot of tactics that were not necessary the most efficient but got the work done. I think this is due to a combination of a lack of knowledge and the limited amount of time. If I had more time I'd spend more time and thought on time complexity and how the speed and efficiency of the program may change as we have bigger and bigger data sets. I probably spent like 10 hours just on learning D3 and another 10 on testing and programming itself. On top of that, at the very end, I had a couple more ideas on making the design better and making the overall app more pleasing to sight. This added another 5 hours.