-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (187 loc) · 11.8 KB
/
index.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
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<!-- Metadata -->
<head>
<meta charset="utf-8">
<!-- Title -->
<title>Project Team 11: Crime and Safety around Chester Square Park, DS 4200 F19</title>
<!-- CSS Styling -->
<link rel="stylesheet" href="style.css">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/site.webmanifest">
<link rel="shortcut icon" href="favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<!-- Main page content -->
<body>
<!-- Update this with your GitHub repo URL -->
<span id="forkongithub"><a href="https://github.com/Northeastern-DS-4200-F19/project-team-11-pedestrians">Fork me on GitHub</a></span>
<!-- Your writeup goes here -->
<div class="content-column">
<h1>Project Team 11: Crime and Safety around Chester Square Park, DS 4200 F19</h1>
<p><strong>Karman Singh</strong>, <strong>Eric Chung</strong>, <strong>Edward Chung</strong></p>
<p>Service-Learning Course Project as part of <a href="http://www.ccs.neu.edu/home/cody/courses/ds4200-f19/">DS 4200: Information Presentation and Visualization</a>,
taught by <a href="https://cody.ktimey.northeastern.edu/">Prof. Cody Dunne</a>, <a href="https://visualization.ktimey.northeastern.edu/">Data Visualization @ Ktimey</a>,
<a href="https://www.ktimey.northeastern.edu/">Northeastern University</a>.</p>
<h1>Motivation</h1>
<p> Prior to designing these visualizatons, we knew that we wanted to build a means for gauging the
levels of pedestrian safety over time in Chester Square Park
and measuring the change in safety level over time as new initiatives are put into place. Since perceived safety
level is not a standard metric with an open
dataset available to the public, we decided to use crime reports as an analog for safety measure around Boston and
in Chester Square Park. Ultimately, what we
decided to try and accomplish was building a comparison tool that would allow users to compare crime reports
around Chester Square Park over time and with other
neighborhoods around Boston. By building this tool, we were hoping that Carol and others at the Chester Square
Neighborhood Association would be able to look at plans put
in place at similar parks around Boston to be able to learn how to make Chester Square Park more safe (and
welcoming) for pedestrians.</p>
<h1>Visualization</h1>
</div>
<div class="container vis-holder">
<div class="rowOne">
<div class="boston viz"><svg id="vis3"></svg></div>
<div class="boston viz"><svg id="geovis"></svg></div>
</div>
<table class="table">
<thead>
<tr id="heading"></tr id="heading">
</thead>
<tbody id="table_body">
</tbody>
</table>
<div class="toolbar" style ="margin:auto; text-align:center;">
<button class="btn btn1" data-activity="crime">Crime</button>
<button class="btn btn2" data-activity="real_estate">Real Estate</button>
<button class="btn btn3" data-activity="demographic">Demographic</button>
</div>
<div class="boston viz"><svg id="vis5"></svg></div>
<div class="rowTwo">
<div class="boston viz"><svg id="vis7"></svg></div>
<div class="boston viz"><svg id="vis8"></svg></div>
</div>
</div>
<!-- Your writeup goes here -->
<div class="content-column">
<h1>Demo Video</h1>
<video controls width="100%">
<source src="./files/DS 4200 F19 Team 11 - Demo Video.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video. Here is
a <a href="./files/DS 4200 F19 Team 11 - Demo Video.mp4">link to the video</a> instead.</p>
</video>
<h1>Visualization explanation</h1>
<p> For our visualization, there are 4 main components. The first is the choropleth map in the top right which
updates based on the dataset that is selected and shows an overview of the selected data using different
shades of color. When a neighborhood is selected on the choropleth map, the second visualization (a line chart) in
the top
left corner is updated to show the relevant data for the specific neighborhood that is chosen. The third
visualization
is the stacked bar chart in the middle which shows every neighborhood in Boston and Chester Square Park. This
stacked bar chart is brushed and linked with the other two visualizations to allow for aggregation of the data
of multiple neighborhoods. Finally, the last component of our visualization is the scatter plot and bar graph at the bottom
which shows the results of the survey we sent out to the residents of Chester Square along with crime data specific to Chester Square.</p>
<h1>Data Analysis</h1>
<p>The primary dataset that we used was the Boston Crime dataset pulled from the Analyze Boston website. Due to the
fact that the dataset was
very large (over 450,000 entries) we did a lot of preprocessing using Python to aggregate the data ahead of time.
For example, for the crime count by time
chart, we ran a python script on the Boston crime dataset ahead of time to aggregate the data by time before
displaying the data using D3.</p>
<h1>Task Analysis</h1>
<p>For this project, we had three tasks that we wanted to accomplish: aggregate crime, real estate, and
demographic data for Boston neighborhoods, analyze pedestrian demographic data of Chester Square Park, and
compare the level of safety current users of the park feel with crime reports. For the first task we had,
analyzing the different types of data, we wanted to summarize the plethora of data across the three datasets
we had and allow users to be able to browse the data through our visualizations. The focus of our second domain
task was to identify the different kinds of demographic data we were working with and then allow users to look up
the different data and make their own discoveries about it. For our last task analysis we wanted to allow users
to compare the survey results of perceived safety level with the hourly crime count and make their own discoveries
and conclusions about the data.
</p>
<h1>Design Process</h1>
<p>We began our design process by looking at already existing visualizations of crime data for Boston. While looking
at the visualizations, we
noticed that there was a common theme in that all of the already existing visualizations did not have good visual
encodings and were overall very
unintuitive. A common problem was the color schemes for the visualizations were very poorly chosen. With this
information in mind, we decided
that we would create a better crime map for Boston. <br><br> On top of creating a crime map, we also surveyed
safety levels of residents around Chester
Square Park and plan to compare crime levels with perceived safety levels around the Park. We hope to find a
correlation between crime and safety
around the park so as to use the crime dataset we have as an analog for Safety data. Originally we planned on our
visualizations to look like the
following: <br></p>
<table>
<tr>
<td><img src="images/vis1.png" width="800px" height="500px"></img></td>
</tr>
<tr>
<td><img src="images/vis2.png" width="800px" height="500px"></img></td>
</tr>
<tr>
<td><img src="images/vis3.png" width="800px" height="500px"></img></td>
</tr>
<tr>
<td><img src="images/vis4.png" width="800px" height="500px"></img></td>
</tr>
</table>
<p>However, after looking at the visualizations more critically, we realized that size encoded circles were not the
best way to show relative crime (and
real estate prices). Ultimatley we chose to go with the shaded neighborhood regions instead as this was a more
distinguishable use of color.</p>
<h1>Conclusion</h1>
<p>Over the past few months, we have been able to create a visualizaton that accurately
compares the crime counts of all of the different neighborhoods in Boston with the crime counts in Chester Square
Park. Users
are able to see crime counts by the hour for each neighborhood and are able to aggragate results of multiple
neighborhoods. Currently, our visualization compares the crime count and top 5 crime categories reported in
Chester Square Park with neighborhoods as a whole around Boston. We understand that this is not an even
comparison and in the future we hope to isolate data for parks around Boston similar to how we did for
Chester Square Park now. Using the real estate and demographic data we have also included in our visualization,
we hope that users, in the future, will be able to find parks with similar real estate and demographic values.
Once these parks are located, users can then look into the history of those parks to see what initiatives were
implemented in the past as well as if they were succesful.</p>
<h1>Acknowledgements</h1>
<ul>
<li><a href="https://d3js.org/">D3: Data-Driven Documents</a> by Mike Bostock.</li>
<li><a href="https://codepo8.github.io/css-fork-on-github-ribbon/#">Pure CSS responsive "Fork me on GitHub"
ribbon</a> by Chris Heilmann</li>
<li>Line Chart Starter Code From Class</li>
<li>Brushing and Linking Assignment From Class</li>
<li><a href="https://www.d3-graph-gallery.com/graph/scatter_basic.html">Basic Scatterplot in D3.js</a></li>
<li><a href="https://codepen.io/alanbuchanan/pen/RryBVQ">Tooltip Positioning in D3</a></li>
<li><a href="https://observablehq.com/@d3/brushable-scatterplot-matrix">Brushable Scatterplot Matrix</a></li>
<li><a href="https://pandas.pydata.org">Pandas Python Library</a></li>
<li><a href="https://www.zillow.com/howto/api/APIOverview.htm">Zillow API</a></li>
<li><a href="https://data.boston.gov/dataset/crime-incident-reports-august-2015-to-date-source-new-system">Boston
Crime Dataset</a></li>
<li><a href="https://pypi.org/project/Shapely/">Shapely Python Library</a></li>
<li><a href="https://www.zillow.com/howto/api/APIOverview.htm">Boston Demographic Data</a></li>
<li><a href="https://bl.ocks.org/d3noob/814a2bcb3e7d8d8db74f36f77c8e6b7f">Dual Axis Example</a></li>
<li><a href="https://bl.ocks.org/caravinden/d04238c4c9770020ff6867ee92c7dac1">Bar Chart Example</a></li>
<li><a href="http://bl.ocks.org/djq99/a3cdacbed72acdc6345e">Geo Visualization Example</a></li>
<li><a href="http://bl.ocks.org/jonahwilliams/cc2de2eedc3896a3a96d"> Interactive HTML Table I </a></li>
<li>Brushing and Linking Example by Cody Dunne and Uzma Syeda</li>
<li>Table Example by Cody Dunne and Uzma Syeda</li>
</ul>
</div>
<!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
<script src="lib/d3.v5.12.0/d3.min.js"></script>
<script src="lib/d3.tip/d3-tip.min.js"></script>
<script src="geoViz.js"></script>
<script src="visualization.js"></script>
<script src="lineChart.js"></script>
<script src="scatterplot.js"></script>
<script src="stacked.js"></script>
<script src="csOverTime.js"></script>
<script src="csTopFive.js"></script>
<script src="tablevis.js"></script>
<script src="index.js"></script>
</body>
</html>