-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDescription.Rmd
304 lines (167 loc) · 21 KB
/
Description.Rmd
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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
---
title: "<div>Data Visualization Project</div>"
author: "<div> Alessio CRISAFULLI CARPANI <br> Adrien CHAILLOUT-MORLOT <br> Lea LAUSMANN </div>"
output:
html_document:
toc: false
code_download: true
includes:
before_body: www/header.html
---
<br>
<h5 style="font-style: italic; font-weight: 400;">
Master for Smart Data Science (ENSAI)
</h5>
<hr style="border-top: 3px solid #bbb; border-radius: 5px;">
::: {.row}
::: {.col-md-4}
<h3> Dataset </h3>
Our dataset consists of crimes that happened in Boston between Jan. 2016 and Aug. 2019. It can be found at:
https://sedelmeyer.github.io/predicting-crime/pages/data.html
Originally, the authors created that data set to use it for predicting the occurence of different crime types in Boston. Therefore, they collected and combined data from different sources and used it for their models.
It is also possible to download it from the buttom below:
```{r download, echo=FALSE}
suppressPackageStartupMessages(library(downloadthis))
load("data/BostonCrime.RData")
BostonCrime %>% download_this(
output_name = "Dataset",
output_extension = ".csv",
button_label = "Download Data as CSV",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-save")
```
:::
::: {.col-md-4}
<h3> Project Goal </h3>
We want to create a shiny app visualizing the described data set.
Since there is quite much information the data should be analyzed from different point of views (e.g. neighborhoods, type of crimes, temporal development, additional information). We want to use many interactive and adapting tools that we worked with in the lecture already to make a potential user of the app interested in playing around with the data.
On the other hand, it is just one data set on one limited topic that we want to present, so the app should not be too extensive. Especially, it should be built in a way which is not confusing for a user, which is why a well thought out structure will be necessary.
Also, we want to concentrate on a nice layout, because we are personally interested in improving our skills in that regard
:::
::: {.col-md-4}
<h3> Shiny App </h3>
The finished app can be found at:
https://alecrsf.shinyapps.io/BostonShiny/
Whereas the github repo can be found by clicking the upper-right corner of this page, or via the following link:
https://github.com/alecrsf/BostonCrimeShiny
The app is structured as follows. There are three main pages the user can choose from that make a look into the data possible from different perspectives.
Therefore, the structure of the code looks similar. We set the layout and call necessary libraries, utility functions, and the main pages (called modules) in global.R. Then we just call those functions in ui.R (using navbarPage) and server.R to make the code cleaner.
In the following, we describe the app and its features in detail.
:::
:::
<hr style="border-top: 3px solid #bbb; border-radius: 5px;">
<!-- (?) -->
## Boston Crime - Intro
__Description:__
Since it’s the first page the user sees, it serves as an introduction of the app and the dataset. It's structure is therefore quite simple.
### 1. Side Panel
The page consists of three parts. The panel on the left-hand side describes the concept of the app and how to use and interpret the right-hand side of the page.
### 2. Selection of a Year
The user can select one of 4 years that we have data about in a dropdown menu. A small icon above gives an explanation of the dropdown.
After changing the year the diagram and numbers on the right-hand side of the page update immediately according to the selection made.
### 3. Interactive Barplot
The first interactive diagram shows a barplot of the number of of crimes (of any kind) for each neighborhood in the selected year.
### 4. Tooltip
A tooltip appears for each bar and contains the number of crimes and the average income in the respective neighborhood.
### 5. Help Box
Again, a small icon gives a hint to click on any bar of the plot to zoom into that neighborhood.
### 6. Drilldown
After clicking on a bar of the original diagram, the app zooms into that neighborhood and shows a new diagram with the number of crimes in each ZIP5 area.
### 7. Get back
With the drilldown of the diagram there also appears a new button to get back to the previous overview.
### 8. Export Data
Moreover on the right there is another button that makes an export of the diagram or the underlying data possible.
### 9. KPI's
The third part of the page is located at the bottom and shows for the selected year different key information and how they changed compared to the previous year.
When changing the year in the side panel the KPI's update in such a way that it seems like the number counts up. This was defined in the module metrics.R.
Moreover, the change in percent gets colored automatically according to an increase or decrease of the number of crimes. The respective code can be found in the css file of our project.
## Boston Crime - Map
__Description:__
The second page of our shiny app compares crimes in different neighborhoods on a map. This time the user can also differentiate between different crime types for each neighborhood.
### 1. Click on Map
### 2. Table
On the left hand-side the user can see a table that contains all number of crimes per neighborhood over the whole given timestamp.
### 3. Help Button
Again, there is a help button to make the user aware of the possibility to sort each column in increasing or decreasing order.
### 4. Sort in increasing order
### 5. Sort in decreasing order
### 6. Search
The user can also can filter for certain neighborhoods.
### 7. Boxplots
At the bottom of each column, a boxplot gets printed to describe the distribution of the respective crime type.
### 8. Customize the table
The user decides how many rows of the table are shown directly. If they don’t fit on one page they get split up and we can switch pages by clicking on next.
### 9. Change size of the table
Increasing the number of rows results in having to scroll down to see the rest of the neighborhoods.
### 10. Map
The second half of the page is the actual map. At the top we have a row of different choices to make.
### 11. Type
The first choice is to define the type of the map: either Cloropleth or Clusters.
### 12. Date
The date range for which the user wants to examine the number of crimes can be adapted, too.
### 13. Type of crimes
In that dropdown menu, the user can either select all, none or only a few crime types to show up on the map.
### 14. Zoom into map
When having clusters activated, the user can click on any of the markers to zoom into the map and see the different locations of crimes in more detail.
### 15. Mini Map
The mini map on the bottom right shows the surroundings of the current shown location of the main map to give the user an overview of what he looks at.
### 16. Distance Mea
On the bottom left the user has the possibility to measure different distances and areas.
# Boston Crimes - Overview
__Description:__
The third and last page gives an overview over only one neighborhood including multiple diagrams.
### 1. Overview
### 2. Select neighborhood
On the upper left of the page the user has to select the neighborhood he wants to see more details about.
### 3. Line chart
A line chart shows the historical development of the four most important types of crimes.
### 4. Pop up
Hovering over a point in the charts makes the exact number of crimes visible.
### 5. Zoom in and out
The user can increase and decrease the shown time span. Moreover, one can move the chart by pulling it in any direction, go back to the initial settings or download an image of the chart.
### 6. Radial Charts
Next to the line chart, there are two radial charts showing the percentage of poverty and graduated people from the selected neighborhood.
### 7. Counters
At the bottom of the page we can find multiple counters that give some key information about the neighborhood.
### 8. Wordcloud
In the wordcloud on the upper right, above each word appears the number of times that word appeared in the description of crimes in the respective neighborhood.
### 9. Pie Chart
A pie chart at the bottom right of the overview shows the distribution of crimes in the neighborhood.
### 10. Download Data
Again, the user can download an image of the whole dashboard or the underlying data that served as a basis for the page.
