cs460/index.html at master · sdunham/cs460 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html>
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<title>Puget Sound Security Incident Visualization</title>

		<!-- Google Chrome Frame for IE -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<!-- mobile meta (hooray!) -->
		<!-- <meta name="HandheldFriendly" content="True"> -->
		<!-- <meta name="MobileOptimized" content="320"> -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
		<link rel="stylesheet" type="text/css" href="css/cs460-theme/jquery-ui-1.9.2.custom.min.css" />

		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
		<!--[if lte IE 8]>
			<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.ie.css" />
		<![endif]-->
		<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>

		<link rel="stylesheet" type="text/css" href="css/style.css" />

		<!-- Chart Stuff -->
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript" src="scripts/smartResize/smartResize.js"></script>
		<script type="text/javascript" src="scripts/cs460_chart.js"></script>

		<!-- Date and Time Pickers -->
		<link rel="stylesheet" type="text/css" href="scripts/timepicker/jquery.ui.timepicker.css" />
		<script type="text/javascript" src="scripts/timepicker/jquery.ui.timepicker.js"></script>
		<script type="text/javascript" src="scripts/cs460_filterPickers.js"></script>

		<!-- Marker Cluster Plugin -->
		<link rel="stylesheet" href="scripts/Leaflet.markercluster/MarkerCluster.css" />
		<link rel="stylesheet" href="scripts/Leaflet.markercluster/MarkerCluster.Default.css" />
		<!--[if lte IE 8]><link rel="stylesheet" href="scripts/Leaflet.markercluster/MarkerCluster.Default.ie.css" /><![endif]-->
		<script type="text/javascript" src="scripts/Leaflet.markercluster/leaflet.markercluster-src.js"></script>
		<script type="text/javascript" src="scripts/cs460_map.js"></script>
	</head>
	<body>
		<aside id="fake-warn" style="display:none;">
			<p style="text-align:center; margin:0;">You are currently viewing fake data!</p>
		</aside>
		<aside id="controls">
			<h2 class="filter-toggle">Filter Incident Data</h2>
			<div id="filters">
				<div class="filter-field">
					<label for="data-radios">Data set:</label>
					<span id="data-radios">
						<input type="radio" name="data" value="real" checked="checked" id="realDB"><label for="realDB">Real</label>
						<input type="radio" name="data" value="fake" id="fakeDB"><label for="fakeDB">Fake</label>
					</span>
				</div>
				<div class="filter-field">
					<label for="datepicker-start">Date Range:</label>
					<input type="text" name="datepicker-start" id="datepicker-start"> to
					<input type="text" name="datepicker-end" id="datepicker-end">
				</div>
				<div class="filter-field">
					<label for="timepicker-start">Time Range:</label>
					<input type="text" name="timepicker-start" id="timepicker-start" value="00:00"> to
					<input type="text" name="timepicker-end" id="timepicker-end" value="23:59">
				</div>
				<div class="filter-field">
					<label for="incident-select">Type(s):</label>
					<select multiple="multiple" name="incident-select" id="incident-select" title="Hold ctrl while clicking to select multiple types">
						<option disabled="disabled">Select Type(s):</option>
						<option selected="selected" value="'AGGRAVATED ASSAULT'">Aggravated Assault</option>
						<option selected="selected" value="'ATTEMPTED CRIME'">Attempted Crime</option>
						<option selected="selected" value="'BURGLARY'">Burglary</option>
						<option selected="selected" value="'DRUG ABUSE VIOLATIONS'">Drug Abuse Violations</option>
						<option selected="selected" value="'LIQUOR LAW VIOLATIONS'">Liquor Law Violations</option>
						<option selected="selected" value="'MOTOR VEHICLE THEFT'">Motor Vehicle Theft</option>
						<option selected="selected" value="'MURDER / NON-NEGLIGENT MANSLAUGHTER'">Murder</option>
						<option selected="selected" value="'NEGLIGENT MANSLAUGHTER'">Negligent Manslaughter</option>
						<option selected="selected" value="'ROBBERY'">Robbery</option>
						<option selected="selected" value="'SEX OFFENSE - FORCIBLE'">Sex Offense (Forcible)</option>
						<option selected="selected" value="'SEX OFFENSE - NON-FORCIBLE'">Sex Offense (Non-Forcible)</option>
						<option selected="selected" value="'THEFT'">Theft</option>
						<option value="'UNKNOWN'">Unknown</option>
						<option selected="selected" value="'VANDALISM'">Vandalism</option>
						<option selected="selected" value="'WEAPON VIOLATIONS'">Weapon Violations</option>
					</select>
				</div>
				<div class="filter-field">
					<input type="submit" value="Submit" id="submitButton">
				</div>
			</div>
		</aside>
		<aside id="vis">
			<h2 class="graph-toggle">Incident Chart</h2>
			<div id="vis-content">
				<p>Total Incidents Displayed: <span id="incidentCount"></span></p>
				<div id="graph"></div>
			</div>
		</aside>
		<aside id="info-modal" style="display:none;" title="More information">
			<div id="info-sections">
				<h3><a href="#">About the project</a></h3>
				<div>
					<p>This visualization represents security incidents reported on the University of Puget Sound campus. Incidents are broken up by the <a href="http://en.wikipedia.org/wiki/Clery_Act">Clery Act's</a> crime statistics categories, and can be filtered based based on the date and time they occurred. The user is also able to display data from a database of randomly generated incidents.</p>
					<p>The project was created as part of Scott Dunham's CS460 senior project. It is hoped that a tool such as this would be of use to Puget Sound's security staff in analyzing their security incident data.</p>
				</div>
				<h3><a href="#">System requirements</a></h3>
				<div>
					<p>This visualization utilizes modern web technologies, and is best viewed using a modern web browser. Supported browsers include the most current versions of Chrome, Firefox, Opera, Safari, and Internet Explorer 9 (or greater).</p>
				</div>
				<h3><a href="#">Using the visualization</a></h3>
				<div>
					<p><strong>Filtering Displayed Incidents:</strong></p>
					<p>The displayed incidents can be filtered using the controls in the "Filter Incident Data" pane, located at the bottom of the screen. You can toggle the controls by clicking on the pane's title. When clicked, the date and time range fields will display special tools which will help the user make their selection.</p>
					<p><strong>Viewing the Incident Chart:</strong></p>
					<p>A chart of all the visible incidents is available in the "Incident Chart" pane, located at the bottom of the screen next to the filter pane (or at the top of the screen on mobile devices). You can toggle the pane by clicking on it's title.</p>
					<p><strong>Viewing Individual Incident Details:</strong></p>
					<p>Incident markers are automatically grouped into color-coded clusters <em>(green = 2 - 9 incidents, yellow = 10 - 99 incidents, orange = 100 or more incidents)</em>. Hovering over these clusters will reveal a polygon marking the area it's markers cover. Clicking on them will zoom the map if possible, or reveal the markers it represents. Clicking on a marker will reveal a popup with the revelvant incident data.</p>
				</div>
				<h3><a href="#">Why is there fake data?</a></h3>
				<div>
					<p><strong>The fake data was originally created as a placeholder before the actual Security Services data could be obtained, but was kept for a couple of reasons:</strong></p>
					<p>First, it illustrates a small issue with the data collection process for the real incidents. This data is associated with a specific location (e.g. a building, a street, a parking lot), and not necessarily the actual location of the incident. As a result, the real incident data appears highly clustered when it is placed on a map. The fake data set shows what the visualization would look like if the incidents were more evenly distributed.</p>
					<p>Second, the fake data set shows that the source data for this visualization can be updated on a regular and automatic basis (new data points are generated every night, which are immediately viewable in the visualization). There is currently not an automatic link to the real incident data due to security restrictions, though this could easily be addressed by someone with a high level of access to the source database.</p>
				</div>
				<h3><a href="#">Attribution</a></h3>
				<div>
					<p>The following technologies were used in the creation of this visualization:</p>
					<p><strong>Map Components:</strong></p>
					<ul>
						<li><a href="http://leafletjs.com/">Leaflet</a></li>
						<li><a href="http://www.openstreetmap.org/">Open Street Map tiles</a></li>
						<li><a href="http://maps.cloudmade.com/editor">Cloudmade Map Styles</a></li>
						<li><a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a></li>
					</ul>
					<p><strong>Chart Component:</strong></p>
					<ul>
						<li><a href="https://developers.google.com/chart/">Google Chart Tools</a></li>
					</ul>
					<p><strong>User Interface Components:</strong></p>
					<ul>
						<li><a href="http://jqueryui.com/">jQuery UI Widgets</a></li>
						<li><a href="http://fgelinas.com/code/timepicker/">Timepicker jQuery UI Plugin</a></li>
					</ul>
					<p><strong>Icons:</strong></p>
					<ul>
						<li><a href="http://thenounproject.com/noun/question/#icon-No6165" target="_blank">Question</a> designed by <a href="http://thenounproject.com/tlb" target="_blank">Thomas Le Bas</a> from The Noun Project</li>
						<li><a href="http://thenounproject.com/noun/flask/#icon-No1725" target="_blank">Flask</a> designed by <a href="http://thenounproject.com/jsoderberg91" target="_blank">Julia Soderberg</a> from The Noun Project</li>
						<li><a href="http://thenounproject.com/noun/robbery/#icon-No4270" target="_blank">Robbery</a> designed by <a href="http://thenounproject.com/ochaavmu" target="_blank">United Nations OCHA</a></li>
						<li><a href="http://thenounproject.com/noun/robbery/#icon-No4270" target="_blank">Assault</a> (used as manslaughter) designed by <a href="http://thenounproject.com/ochaavmu" target="_blank">United Nations OCHA</a></li>
						<li><a href="http://thenounproject.com/noun/ski-mask/#icon-No5281" target="_blank">Ski Mask</a> designed by <a href="http://thenounproject.com/United%20Unknown" target="_blank">United Unknown</a></li>
						<li><a href="http://thenounproject.com/noun/murder/#icon-No4269" target="_blank">Murder</a> designed by <a href="http://thenounproject.com/ochaavmu" target="_blank">United Nations OCHA</a></li>
						<li><a href="http://thenounproject.com/noun/forced-recruitment/#icon-No4265" target="_blank">Forced Recruitment</a> (used as sex offense) designed by <a href="http://thenounproject.com/ochaavmu" target="_blank">United Nations OCHA</a></li>
						<li><a href="http://thenounproject.com/noun/car/#icon-No996" target="_blank">Car</a> designed by <a href="http://thenounproject.com/Jeremy" target="_blank">Geremy Good</a></li>
						<li><a href="http://thenounproject.com/noun/pill/#icon-No382" target="_blank">Pill</a> from The Noun Project</li>
						<li><a href="http://thenounproject.com/noun/gun/#icon-No138" target="_blank">Gun</a> from The Noun Project</li>
						<li><a href="http://thenounproject.com/noun/pickpocket/#icon-No1368" target="_blank">Pickpocket</a> designed by <a href="http://thenounproject.com/PKG" target="_blank">Proletkult Graphik</a> from The Noun Project</li>
						<li><a href="http://thenounproject.com/noun/arrest/#icon-No4259" target="_blank">Arrest</a> (used as attempted crime) designed by <a href="http://thenounproject.com/ochaavmu" target="_blank">United Nations OCHA</a></li>
						<li><a href="http://thenounproject.com/noun/hit/#icon-No6593" target="_blank">Hit</a> (used as assault) designed by <a href="http://thenounproject.com/ezy" target="_blank">Ezra Keddell</a> from The Noun Project</li>
						<li><a href="http://thenounproject.com/noun/information/#icon-No5745" target="_blank">Information</a> designed by <a href="http://thenounproject.com/kaduma" target="_blank">David Cadusseau</a> from The Noun Project</li>
					</ul>
				</div>
			</div>
		</aside>
		<section id="map"></section>
	</body>
</html>