steps

8
Steps to use Visualization The home screen that a new user is directed towards. He/she is able to select either of the two major roles that the visualization supports. The screen that is presented to the user once the politician is selected from the modal. It allows for the different districts to be highlighted on mouseover, to provide the user with a visual representation on what the area looks like.

Upload: abhishek-dewan

Post on 30-Jul-2015

359 views

Category:

Design


3 download

TRANSCRIPT

Page 1: Steps

Steps to use Visualization  

­ The home screen that a new user is directed towards. He/she is able to select either of the two major roles that the visualization supports. 

  

  

­ The screen that is presented to the user once the politician is selected from the modal. It allows for the different districts to be highlighted on mouseover, to provide the user with a visual representation on what the area looks like.  

 

Page 2: Steps

 ­ Once a district selection is made the user is provided with all the different 

schools in the selection with the color of the schools determined by a gradient scale. The legend attached allows the user to see values of the gradient scale. 

­ The user is also presented with hazard markers which are color coded different with the legend being shown on the bottom left.  

­ Other districts are shadowed to focus the attention of the user to the area he/she is interested in. 

­ Lastly the user is provided with a ranked list of the least hazard compliant schools in that district. A user may click on any item in the list to be directed to that particular school. 

 

Page 3: Steps

  

­ Once an item on the list has been clicked the respective marker’s size is increased in order to show that a selection had been made. 

­ Moreover the details panel provide relevant information to the user about the violations, student­ teacher ratio, etc. 

   

Page 4: Steps

  

­ The visualization also from here allows the user to be able to reorder the hazards in order of preference. 

­ This updates the ranked list and also the color of the school markers. 

Page 5: Steps

 ­ based on the preference of hazards selected by the user, the system changes 

the ranked list. Once a point on that list is clicked we zoom in to show the selection and also visually represent the important details for that school. 

  

Page 6: Steps

  

­ The user is able to change modes to parent modes by clicking the radius button on the top left. This enables the search bar and the pointer button to be shown to the user. 

  

Page 7: Steps

 ­ From there the user can take the pointer tool and mark a specific point on the 

map.  ­ Moreover, it can be seen that the ranked list changes based on the user’s 

selection.   

Page 8: Steps

 ­ The user also has the option of entering a address that inherently would show a 

10 mile radius around the point of interest. From there the user can change the radius using the radius slider on the top right.