generated from usf-cs360-spring2020/template-bulma
-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsetime.html
206 lines (190 loc) · 11.4 KB
/
responsetime.html
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ColorIsFake Midterm</title>
<!-- Load Bulma from CDN (consider saving it to repository instead) -->
<!-- https://bulma.io/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Load Font Awesome 5 (free) icons -->
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<!-- include d3.js v5 -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- include d3.js modules -->
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<!-- My CSS! -->
<link rel="stylesheet" href="resources/eve-style.css">
<link rel="stylesheet" href="resources/response-style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Page header -->
<!-- https://bulma.io/documentation/layout/hero/ -->
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">ColorIsFake Midterm</h1>
<h2 class="subtitle">Chaitrika, Priscilla, and Eve's Data Visualization Site</h2>
</div>
</div>
</section>
<!-- End page header -->
<!-- Page navigation -->
<!-- https://bulma.io/documentation/components/navbar/ -->
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<span class="icon"><i class="fas fa-home"></i></span>
<span>Home</span>
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="main-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="main-menu" class="navbar-menu has-text-weight-medium">
<!-- Left navbar items -->
<div class="navbar-start">
<a class="navbar-item" href="dataset.html" title="Dataset">
<span class="icon"><i class="fas fa-table"></i></span>
<span>Dataset</span>
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Visualizations
</a>
<div class="navbar-dropdown">
<a class="navbar-item is-active" href="responsetime.html">
<span class="icon"><i class="fas fa-chart-line"></i></span>
<span>Priscilla - Response Time</span>
</a>
<a class="navbar-item" href="preparationtime.html">
<span class="icon"><i class="fas fa-chart-area"></i></span>
<span>Evelyn - Preparation Time</span>
</a>
<a class="navbar-item" href="hospitalaccesstime.html">
<span class="icon"><i class="fas fa-chart-bar"></i></span>
<span>Chaitrika - Hospital Access Time</span>
</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Prototypes
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="responsetime-prototype.html">
<span class="icon"><i class="fas fa-chart-line"></i></span>
<span>Priscilla - Response Time</span>
</a>
<a class="navbar-item" href="preparationtime-prototype.html">
<span class="icon"><i class="fas fa-chart-area"></i></span>
<span>Evelyn - Preparation Time</span>
</a>
<a class="navbar-item" href="hospitalaccesstime-prototype.html">
<span class="icon"><i class="fas fa-chart-bar"></i></span>
<span>Chaitrika - Hospital Access Time</span>
</a>
</div>
</div>
</div>
<!-- Right navbar items -->
<div class="navbar-end">
<a class="navbar-item" href="about.html" title="About">
<span class="icon"><i class="fas fa-info-circle"></i></span>
<span>About the Team</span>
</a>
</div>
</div>
</div>
</nav>
<!-- End page navigation -->
<section class="section">
<div class="container">
<!-- Begin page content -->
<h1 class="title">
Response Times For Each Neighborhood in San Francisco from 2012 to 2019
</h1>
<br/>
<h3>For this visualization we measured the average amount of time it takes for the 911 Operator to dispatch an available unit and when this unit arrives at the location of the incident. We wanted to find any discrepancies or variation between the neighborhoods of San Francisco. Some neighborhoods have more incidents reported, are farther from stations and hospitals in distance, and have heavier traffic in their area. All of these definitely affect travel and transport but I wanted to learn if there were any clear patterns present for each year.</h3>
<br/>
<h3 class="subtitle"><strong>Data Encoding</strong></h3>
<h3>This graph measures the difference between the recorded Dispatch DtTm and On Scene DtTm in minutes. Each different colored segment represents the Call Group Type, either Alarm, Fire, Life Threatening, or Non Life Threatening, and each segment's length represents the average amount of time it takes for a unit to arrive the the scene after the 911 operator dispatches them for that specific type of call. For example, in 2019, if you called in the Tenderloin about a fire related incident, the unit would be on the scene on average in around five mintues.</h3>
<br/>
<h2><strong>Average Difference Between Dispatch and On Scene Time in Minutes</strong></h2>
<svg id="chart" width="1000" height="700"></svg>
<br/>
Select year:
<select id="year">
</select>
<script src="responsetime.js"></script>
<br/>
<em>Source: https://data.sfgov.org/Public-Safety/Fire-Department-Calls-for-Service/nuek-vuh3</em>
<br/>
<br/>
<h2 class="subtitle"><strong>Interactivity</strong></h2>
<h3>To help visualize the data, this graph is interactive. This graph is able to look at different years recorded in this data set by utilizing the drop down option located at the bottom left side of the graph, underneath the citation. You can choose a year from 2012 to 2019 to display the averages for that year. This graph also displays annotations of the average time in minutes for each segment of the bar graph. However the annotation feature is a little buggy so to use this you must change the year with the drop down options before the annotations can appear. To see the annotation you can just hoover the mouse arrow on one of the bars and an annotation should appear from your mouse.</h3>
<br/>
<h2 class="subtitle"><strong>In Conclusion</strong></h2>
<h3>After removing null values and negative data, I was able to notice some patterns in the data. First, most of the data has some variation but most of the differences in times are very similiar. Considering the vastly different neighborhoods, I was expecting denser areas to have longer periods of time because of traffic or shorter periods of time because of frequency of incidencies. Usually the larger discrepancies are from fire incidents and alarm related incidents tend to be handled the fastest in every neighborhood. One thing I've noticed when alternating between years is that the city as a whole has shown a slight increase in waiting time. I infer that this is a side effect of climate change and an increase in population, perhaps. </h3>
<br/>
<h2 class="subtitle"><strong>Inspirations</strong></h2>
<p>
<a href="https://bl.ocks.org/LemoNode/5a64865728c6059ed89388b5f83d6b67">Stacked bar chart</a>
<p> implemented by Robert Pettersson</p>
<br/>
<a href="http://bl.ocks.org/mstanaland/6100713">Stacked bar chart with tooltips</a>
<p> implemented by Michael Stanaland</p>
<br/>
<a href="https://observablehq.com/@sjengle/interactivity">Interactive ScatterPlot</a>
<p> implemented by Sophie Engle</p>
<br/>
<a href="https://bl.ocks.org/allyraza/dd42733443f03a372f6b19b4a9a648c0">d3 donut with legend horizontal</a>
<p> implemented by Alrazi</p>
</p>
<br/>
<!-- End page content -->
</div>
</section>
<!-- Page footer -->
<!-- <div class="false-footer"></div>-->
<!-- https://bulma.io/documentation/layout/footer/ -->
<footer class="footer smaller-footers-are-better">
<div class="content has-text-centered is-size-7">
<p>
<a href="https://fontawesome.com/" class="button is-small" style="padding-left: 1em; padding-right: 1em;">
<i class="fab fa-font-awesome"></i> <strong>FontAwesome</strong>
</a>
<a href="https://bulma.io" class="button is-small">
<img src="https://bulma.io/images/made-with-bulma--semiblack.png" alt="Made with Bulma" width="128" height="24">
</a>
</p>
</div>
</footer>
<!-- End page footer -->
<!-- Mobile menu responsiveness -->
<!-- https://bulma.io/documentation/components/navbar/ -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
<!-- End mobile menu responsiveness -->
</body>
</html>