forked from MUSA611-CPLN692-spring2019/cpln692-week3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpart3-data-transformation.html
141 lines (102 loc) · 3.95 KB
/
part3-data-transformation.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
<html>
<!DOCTYPE html>
<head>
<!--stylesheet imports-->
<link rel="stylesheet" href="leaflet.css" />
</head>
<body>
<!--left panel-->
<div style="position: absolute; left: 0px; width: 400px; top: 0; bottom: 0;"></div>
<!--map-->
<div id="map" style="position: absolute; right: 0; left: 400px; top: 0; bottom: 0;"></div>
<!--javascript imports-->
<script src="leaflet.js"></script>
<script src="part3-data-clean.js"></script>
<script src="part3-data-dirty.js"></script>
<script>
/* =====================
# Lab 1, Part 4 — Data Transformation
## Introduction
We're going to explore Philadelphia Bike Share locations. We will be using
data from OpenDataPhilly (https://www.opendataphilly.org/dataset/bike-share-stations).
We have converted the data from OpenDataPhilly into an array of arrays
similar to part3. However, our arrays for bike share data have an extra data
point:
1. lat
2. lng
3. label
4. number of bike share docks at the station
This data is assigned to variable "data" in the code below. You can view the
entire array in the part4-data-clean.js file.
## Data Processing
We are only interested in bike share stations with more than 20 docks.
Programmatically create a new array, variable "dataFiltered" that only
contains locations with more than 20 docks. Hint: you should try using
the Array `push()` method.
## Add Markers to the map
Loop through this filtered array, adding all markers to the map.
## Working with Dirty Data
Often, our data will contain inconsistencies that can cause problems in our
code. In the code below, switch out "bikeArrayClean" with "bikeArrayDirty".
If you reload your map now, the markers should be gone. You can review the
dirty data in part4-data-dirty.js.
Without modifying part4-data-dirty.js, change your code to account for the
dirty data. Note: it is okay if your new code ignores a few of the points,
if their formatting is especially wrong. But it should accommodate most points.
===================== */
var raw = bikeArrayDirty;
let data = [];
let cleaning = (obj) => {
console.log(obj);
temp = [];
if(obj[0].includes("-7")) {
n = 0
} else {n=1};
temp.push(obj[n], obj[n+1]);
if(typeof obj[n+2] === 'string') {
if(!obj[n+2].includes('stations')) {
temp.push(obj[n+2]);
} else {temp.push("");};
if(obj[n+2].includes('stations')) {
temp.push(obj[n+2].substr(0,2));
} else if (typeof obj[n+3] === 'string') {
temp.push(obj[n+3].substr(0,2));
} else {temp.push("")};
data.push(temp);
}
};
bikeArrayDirty.forEach(cleaning);
//var data = bikeArrayClean;
/* =====================
Start code to filter data
===================== */
let dataFiltered = [];
let filter = (obj) => {if(obj[3] > 20) {dataFiltered.push(obj)}}
data.forEach(filter);
/* =====================
End code to filter data
===================== */
var map = L.map('map', {
center: [39.9522, -75.1639],
zoom: 14
});
var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map);
/* =====================
Start code to add markers to map
===================== */
let addMarker = (obj) => {
L.marker([obj[1], obj[0]]).addTo(map);
}
dataFiltered.forEach(addMarker);
/* =====================
End code to add markers to map
===================== */
</script>
</body>
</html>