Project 3

From Cmsc434_f11
Jump to: navigation, search

Thanks for your patience. Now it's ready!


Electronic Accident Report System (EARS) Dashboard


To improve the quality of life on campus, the UM Department of Environmental Safety had built an Electronic Accident Reporting System (EARS). Now a lot of accident reports have been collected but they don't have a dashboard to identify patterns of accidents and dangerous locations. In this assignment, you are to design the web-based EARS dashboard UI.

Data Scheme

Each accident report will be given as JSON text. (js/sampleData.js)

 var accidentList={"aaData": [["2011-01-02", "15", "Reckord Armory", "Food poisoning", "false", "38.98602103", "-76.93896174"], ... }

From the first property, each means date, time, location, type of accident, person injured, latitude and longitude.

Functional Requirements

We provide a backbone of dashboard UI(ZIPPED FOLDER) having three UI components,

  1. Data table shows all the accident reports fetched from the database as a table. It can sort and filter by keyword. [1]
  2. Bar chart is a chart showing how many accidents occur on timeline. [2]
  3. Map shows locations of accidents on campus. [3]

and two students in a group will implement the other features described below.

  1. Improve the layout for usability
    • Design the UI the height and width of the components for 1280*1024
    • Add title and help button - create one screen of instruction
    • Arrange them to minimize mouse movements and clicks
    • Keep edges of components aligned. Add reasonable and consistent margins around each component
    • (extra credit) Make the layout dynamically adjust to window size(600px to 1600px)
  2. Add filters for visual analytic tasks
    • We've already implemented,
      • Keyword search functionality and input UI
    • Students need to add two range selection UI filtering accidents by months and time
      • I recommend to use slider in JQuery UI (plugin file is already included in dashboard.html) but feel free to use others if you prefer. (Don't use plain input text or drop-down box)
  3. (extra credit) Accident type keywords in the legend of the Bar Chart work as toggle buttons that show/hide accidents of the type on every components.
  4. Show detailed information of each accident in pop-up balloon when it's clicked on the Map (and Remove the current 'ouch2011-??-??' alert)


Given the functional requirements implemented, user should be able to find patterns of accidents using your dashboard. Find at least three patterns, take screenshots and post them on project 3 gallery page with your insights.


  • 11:59:59pm 11/16/2011
  • Send an email with your zipped folder to TA, including names of group members
  • Create a wiki page on project 3 gallery of your screenshots and insights

Grading Criteria

The grading for this assignment will be based on:

  • (20%) Layout usability; Does your layout provide good usability?
  • (60%) Functionality.Connectivity; Are three components connected to each other as described above?
  • (10%) Functionality.Detail-On-Demand; Does your map shows detailed information of each accident?
  • (10%) Coding style; Is the code readable and well-commented? Does it make good use of ID and CLASS names? Does it follow the separation of three layers (content,presentation,behavior)?
  • Extra credit(up to 20%) will be given to groups who implement extra features or visual impact.