BicycleVis - Investigating Bicycle Fatality Patterns

Problem Description:

In this project, we attempt to understand the circumstances that make biking unsafe through our data and our visualization of it. We analyze a dataset of bike accidents across the US taken from the Fatality Analysis Reporting System (FARS). We consider time of day (which gives us an indication of lighting condition on the road), weather conditions, what part of the road the bike-rider was on (e.g. bike lane, normal road, crosswalks, etc.), and finally whether the state in which the accident occurred allows bikes to be ridden on sidewalks.

Visualization Description:

We have decided to have a three part visualization that will help us understand bicycle fatality trends:

The first view is an overview that shows the US average across the calendar year. This will help the user to quickly identify periods of the year where there are significantly more or less bicycle fatalities. The view also allows the users to click and drag to select a portion of the year to focus on. The selected period of the year will update the remaining visualizations to fatalities occurring during that calendar period.

The second view is a category matrix heatmap with the y axis having weather conditions and the x axis having relative street riding locations. This view represents the number of fatalities in a heat map style with color coding. However, it is important to note that the data displayed is restricted to the states selected from the states control filter on the right. Hovering over any cell in the category data matrix would give the details of the cell to the user. The details would include the weather, location that the cell represents, and the number of fatalities for that combination of weather and location.

There is also a law mode feature to allow the coloring on the graph to be in red for sidewalk riding prohibited and blue for permitted. Once the user has selected the states, the user can select a rectangle from the matrix heatmap, and this will be broken down into individual state lines for the multi-line graph. Additionally, a user may select a rectangle from either axis of the category data matrix and this will show the average for the selected axis category across all the categories of the other axis in the multi-line graph.

The third view is a multi-line graph that will show the details of each selected state as an average, for the specified category of weather and riding location, during the specified calendar period. Each data point for a line represents the average number of bicycle fatalities for three hour time blocks across the whole day. When the user hovers over a line, it will highlight and show the state it represents as well as the exact value of each data point. Additionally, the US average value will always be shown for an easy comparison with a hovered over state line. Also, if law mode is selected each line will be drawn red or blue based on the state law. This will help to easily see a trend among the selected states how it compares to the average.

Basic Interactions:

• The overview time slider as well as the checkbox control panel (to select states, weekdays / weekends) will affect the numbers displayed on both the category data matrix and the line graph.

• Additionally, clicking on any cell in the category matrix heatmap would pull up the line graph view for that combination of weather and location which the category data matrix represents (e.g., ‘Clear’ Weather and ‘Sidewalk’ Location), and all other filters such as time, week days and state selections would also apply. The user can click on multiple cells in the matrix and one line chart for each cell shows up in the space below. Deselecting the cell in the matrix removes the corresponding line graph.

To find more about this, take a look at the project video and the design document.

Detecting URLs/Links Clicked on a Webpage

This has more to do with WebView in Windows Store APIs but it could apply to other situations since its just javascript. I wanted to find a way to detect what page the user navigates to, and unfortunately WebView does not have that functionality. So I had to resort to injecting javascript...

Now I'm not a javascript expert, so if there are any better ways to do this please let me know :)

Instead of changing each and every link and adding my own custom handlers, I decided to override the onclick event in the body. Whenever the user clicks anywhere on the page, my custom onclick handler will receive the event and handles it accordingly. 

It first checks to see if it is inside an <a> tag, if it is then we are pretty much done since we found the link. If it isnt, it continues to check the parent tag until it reaches the body. This handles cases where you have an <img> tag inside an <a> tag. So when the user clicks on the image, the onclick event will be received on the image and not the <a> tag. So we have to traverse upwards.

Here is the code:

Link Detection Script

 document.body.onclick = function(e)
 {
 //If element has a tag type of a, then return href tag but if element is of another type, check its parent to see if it is embedded in an A tag, if not keep on
 //checking parents until it reaches the top most tag (html)
    var currentElement = e.target;
    while(currentElement.nodeName!='HTML')
    {
       //console.log('Parent Node: '+parent.nodeName);
       if(currentElement.tagName == 'A')
       {
          if(currentElement.href.indexOf('javascript:')==0)
          {
             window.external.notify('{\'id\':\'message_printout-'+GenerateID()+'\',\'action\':\'message_printout\',\'message\':\'Link was clicked with javascript void or some javascript function\'}');
             return true;
          }
          var rel = currentElement.rel;
          var target = currentElement.target;
          var newpage = false;
          if(rel=='external' || target=='_blank')
            newpage = true;
          window.external.notify('{\'id\':\'leaving_page-'+GenerateID()+'\',\'action\':\'leaving_page\', \'url\':\'' + currentElement.href +'\', newpage:\''+newpage+'\'}');
         return false;
       }
       currentElement = currentElement.parentNode;
    }
}
 return true;
 }

Note: The window.external.notify code is specific to WebView inside Windows Store. What I'm doing here is basically notifying my application from javascript inside the WebView. So when a link is clicked I would get a message with the url, which I will then handle my self. You could just replace window.external.notify with console.log or your own function call.

This should detect links for 80% of the cases. The 20% cases will be iFrames, and dynamic websites that use jquery and ajax. You would have to handle iframes separately, look at each iframe, find its document element and execute this javascript inside it. 

For other complex websites, the script above might not detect on click events. An example would be mail.yahoo.com, when you load an email, the link detection script above would not detect any clicks inside the email body. I wasn't able to figure out why this is happening other than the onclick is being handled by some other script. So for these small cases I just altered the url (inside the href tag) to call my function. It would look like this:  

function CustomOnClick(url, newpage)
{
   //console.log('link-detect: ' + url + ' ' + newpage );
}

function linkReplacementScript()
{
    var aTagList = document.getElementsByTagName('a');
    for(i = 0; i<aTagList .length; i++)
    {
      var url = aTagList[i].href;
      var rel = aTagList[i].rel;
      var target = aTagList[i].target;
      aTagList[i].rel = '';
      aTagList[i].target = '';
      var newpage = false;
      if(rel=='external' || target=='_blank')
         newpage = true;
      if(url.indexOf('javascript:')==0)
     {
        //do nothing if its javascript code
      }
      else
      {
        aTagList[i].href = 'javascript:CustomOnClick(\''+url+'\',\''+newpage+'\');';
      }
   }
}

But then there are cases where the dom is altered after the page has loaded. An example of this would be dynamic websites that insert content using ajax/jquery. For this case we would have to detect when the dom has changed and then call the link replacement script above. There is a way to detect this using MutationObserver (see this post). 

Basically whenever you get a dom updated event, you would call the link replacement script. Note: the link replacement script is only for cases where the link detection script has failed. It's sort of a catch all fallback just incase. 

Medical Viewer for Emory

Project Links
Github

# of Team Members: 5

This was my senior design project; we worked with emory to create a tablet app that lets doctors and nurses monitor patient data and annotate this data. It uses a variety of technologies and the goal is to make the application as easy to use while still showing all essential data.

Project Documents
Project Documentation/Description
This project documentation/description was written by the whole team.

MRS: Mobile Response System

Project Links

Website

# of Team Members: 4

This project description was written by the whole team.

Our project is designed to be a complete replacement for the current Student Response System provided by TurningPoint.  The turning point system requires students to purchase a $50 ‘clicker’ device or purchase a 3 month subscription to their mobile service (the semester is 3.5 months long), which is not optimum for students who are already being hit with tuition and fee increases virtually every semester.  Additionally, professors and TAs have complained about the software that comes with TurningPoint for managing sessions and collecting student responses; it has caused issues with some classes’ gradebooks in the past and has generally been very unreliable.    

The solution to this is a web-based, GTMob plugin that will make use of location services when available and alternate location-detection when not available that will allow students to effectively “bring their own device” as a personal response device.  We also plan to allow professors to upload a gradebook CSV file from Sakai, which will then be populated with the student’s PRS scores.  This file can then be downloaded from our tool on GTMob and reuploaded to Sakai, importing grades.   

Website for ECIC using Drupal

Project Links
http://ec-ic.org

A few years ago, I helped design a website for ECIC. We ended up deciding to use Drupal for ease of managing the website. This is going to be a short post because I dont remember too many details here but if you have any questions feel free to ask them in the comments. 

The Lab Assistant (Lab Management Software)

Project Links:
Source Code

# of Team Members: 4

This is a little long, I just copied the project description from our project proposal. 

Teachers in K-12 and in higher education often need to group students into teams for class exercises and labs. Grouping, tracking and grading teams can be a real nightmare -- especially since most course software like t-square only allows grades to be assigned to individuals.

For the purpose of this assignment, exercises and labs are considered to be the same thing.

Users

Student- A student can do the following things:

• log on to the system
• sign up for a course
• view their team assignments
• sign up for a team, if the team is self selection
• form a team if the team is self selection

Instructor - An instructor can do the following things:

• create, delete and view labs/exercises
• lookup a student by name and see their team assignments
• create a new lab/exercise
• can view students who are not yet on teams for a particular lab
• can create a course that they will be teaching
• can view teams and students on those teams

System Administrator - A system administrator can do the following things:

• can do everything any other use can do.
• can add, edit and delete users in the system
• can set or reset passwords for users
• can suspend and unsuspend accounts
• view all the users in the system
• view all the courses in the system

The system should create an initial administrator for first time use name=Administrator, user id = admin password = admin.

Login

• All users must login to the system using an id and password.
• If a user fails to login on 3 consecutive attempts, their account is suspended until reset by a system administrator.
• No functionality is allowed until login has been successful.

Lab/Exercise - A lab is associated with a particular course

• a start date and time
• an end date and time
• a team designation which is one of the following:

• Individual, no teams are allowed
• Random, students may not create or sign-up for teams. The system must create groups of a size selected by the instructor. If the class has left over students, then the team size may be exceeded by 1.
• Self-Select, students may create teams and sign-up for teams.

Team

• a maximum size set by instructor for all teams. This varies by lab/exercise, but is the same for all teams in a given lab.
• a team number (assigned by system and unique for that lab)
• a team name (entered by the students)
• a set of students (for any given lab, a student may only be in one team, but a student may be in several teams across multiple labs).

Course

• a course has some identification like "CS2340 - Objects and Design"
• a course may have one or more Labs associated with it.

Reports

• Lab Membership Report - for a given lab, show all the teams and the students in the team

Persistence

Your system should save the information somehow (usually to disk unless you are trying for the database extra credit), so that it can be reloaded on startup. You should not have to retype all the information in every time you run the system.

Networking

Your system should support multiple simultaneous users. This will be accomplished by using a web-based application. You should use JSP/Servlets or for extra credit GWT.

Logging

You should log errors and exceptions to a file. It is recommended you use log4j or the Java logging API for this service. Logging should be on the server. There is no requirement to log anything on the client.