-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.js
207 lines (202 loc) · 11.1 KB
/
app.js
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
let mapdata = {'WY': {'percent': 12.18, 'result': 21822, 'total': 179175, 'detail': [25, 0, 29, 39, 4]}, 'WV': {'percent': 16.94, 'result': 123833, 'total': 731019, 'detail': [26, 1, 36, 27, 8]}, 'WI': {'percent': 14.46, 'result': 636835, 'total': 4404543, 'detail': [32, 1, 29, 31, 5]}, 'WA': {'percent': 11.66, 'result': 788329, 'total': 6759932, 'detail': [36, 2, 22, 33, 5]}, 'VT': {'percent': 8.59, 'result': 13882, 'total': 161531, 'detail': [50, 1, 20, 24, 2]}, 'VA': {'percent': 12.24, 'result': 744086, 'total': 6080481, 'detail': [44, 2, 20, 26, 5]}, 'UT': {'percent': 8.86, 'result': 229274, 'total': 2586492, 'detail': [34, 2, 21, 36, 5]}, 'TX': {'percent': 16.93, 'result': 4118608, 'total': 24321465, 'detail': [31, 6, 24, 29, 8]}, 'TN': {'percent': 16.92, 'result': 771605, 'total': 4560050, 'detail': [32, 2, 28, 29, 7]}, 'SD': {'percent': 11.28, 'result': 33477, 'total': 296690, 'detail': [32, 1, 26, 34, 5]}, 'SC': {'percent': 19.25, 'result': 810651, 'total': 4212170, 'detail': [29, 2, 27, 31, 8]}, 'RI': {'percent': 12.92, 'result': 130130, 'total': 1007359, 'detail': [33, 3, 28, 27, 6]}, 'PA': {'percent': 17.74, 'result': 2096449, 'total': 11818329, 'detail': [32, 1, 34, 24, 6]}, 'OR': {'percent': 12.75, 'result': 462746, 'total': 3630628, 'detail': [34, 2, 22, 34, 5]}, 'OK': {'percent': 15.65, 'result': 379879, 'total': 2426888, 'detail': [29, 2, 27, 32, 7]}, 'OH': {'percent': 16.32, 'result': 1592051, 'total': 9756400, 'detail': [30, 1, 31, 29, 7]}, 'NY': {'percent': 14.49, 'result': 2715841, 'total': 18741516, 'detail': [37, 4, 26, 24, 7]}, 'NV': {'percent': 15.05, 'result': 392747, 'total': 2609280, 'detail': [24, 5, 29, 33, 7]}, 'NM': {'percent': 25.14, 'result': 414356, 'total': 1647905, 'detail': [29, 4, 25, 32, 8]}, 'NJ': {'percent': 12.85, 'result': 1149545, 'total': 8944469, 'detail': [39, 3, 28, 23, 5]}, 'NH': {'percent': 11.21, 'result': 129118, 'total': 1151684, 'detail': [38, 0, 26, 29, 4]}, 'NE': {'percent': 11.05, 'result': 115275, 'total': 1043655, 'detail': [39, 3, 22, 30, 4]}, 'ND': {'percent': 10.55, 'result': 43371, 'total': 411029, 'detail': [36, 0, 23, 35, 4]}, 'NC': {'percent': 18.0, 'result': 1472148, 'total': 8180205, 'detail': [33, 2, 24, 31, 7]}, 'MT': {'percent': 13.79, 'result': 86337, 'total': 626188, 'detail': [35, 0, 26, 32, 4]}, 'MS': {'percent': 21.59, 'result': 285733, 'total': 1323725, 'detail': [26, 2, 28, 34, 8]}, 'MO': {'percent': 14.42, 'result': 597083, 'total': 4139912, 'detail': [34, 1, 26, 31, 5]}, 'MN': {'percent': 10.65, 'result': 415340, 'total': 3900509, 'detail': [40, 2, 21, 31, 3]}, 'MI': {'percent': 15.51, 'result': 1313337, 'total': 8469754, 'detail': [30, 1, 28, 33, 6]}, 'ME': {'percent': 15.1, 'result': 142261, 'total': 942037, 'detail': [32, 1, 31, 30, 4]}, 'MD': {'percent': 12.41, 'result': 712023, 'total': 5738605, 'detail': [40, 2, 25, 25, 5]}, 'MA': {'percent': 12.56, 'result': 852138, 'total': 6783525, 'detail': [43, 3, 24, 23, 5]}, 'LA': {'percent': 20.44, 'result': 694307, 'total': 3396087, 'detail': [27, 2, 32, 28, 9]}, 'KY': {'percent': 14.33, 'result': 311556, 'total': 2173786, 'detail': [31, 1, 26, 32, 6]}, 'KS': {'percent': 14.0, 'result': 248937, 'total': 1778435, 'detail': [40, 2, 23, 29, 5]}, 'IN': {'percent': 16.4, 'result': 780140, 'total': 4758281, 'detail': [29, 2, 31, 29, 7]}, 'IL': {'percent': 14.24, 'result': 1565394, 'total': 10989736, 'detail': [37, 3, 24, 28, 6]}, 'ID': {'percent': 13.83, 'result': 150757, 'total': 1090160, 'detail': [30, 1, 26, 35, 5]}, 'IA': {'percent': 13.18, 'result': 213912, 'total': 1622601, 'detail': [36, 1, 26, 30, 4]}, 'HI': {'percent': 13.45, 'result': 192191, 'total': 1428462, 'detail': [32, 2, 28, 32, 4]}, 'GA': {'percent': 14.52, 'result': 1133775, 'total': 7810581, 'detail': [35, 3, 24, 28, 7]}, 'FL': {'percent': 14.0, 'result': 2796446, 'total': 19970450, 'detail': [29, 3, 28, 30, 7]}, 'DE': {'percent': 14.41, 'result': 137178, 'total': 952065, 'detail': [31, 1, 32, 26, 7]}, 'DC': {'percent': 17.65, 'result': 120223, 'total': 681170, 'detail': [57, 2, 17, 16, 6]}, 'CT': {'percent': 12.6, 'result': 450531, 'total': 3576452, 'detail': [39, 2, 27, 24, 5]}, 'CO': {'percent': 9.06, 'result': 430787, 'total': 4755954, 'detail': [41, 2, 21, 29, 5]}, 'CA': {'percent': 13.08, 'result': 5068428, 'total': 38745526, 'detail': [33, 8, 20, 29, 7]}, 'AZ': {'percent': 21.58, 'result': 1459910, 'total': 6764001, 'detail': [29, 4, 24, 34, 7]}, 'AR': {'percent': 18.77, 'result': 313980, 'total': 1673132, 'detail': [28, 2, 30, 30, 7]}, 'AL': {'percent': 19.6, 'result': 711565, 'total': 3630681, 'detail': [28, 2, 28, 30, 9]}, 'AK': {'percent': 9.95, 'result': 50069, 'total': 503162, 'detail': [32, 1, 25, 37, 3]}};
function mapChart() {
let selectedState = 'AZ';
for (let i in mapdata){
let cur = mapdata[i];
cur.fillKey = colors(cur.percent);
}
function colors(color, population) {
if (population) {
if (color < 5) {
return 'veryLow'
} else if( color > 5 && color < 10) {
return 'low'
} else if( color > 10 && color < 20) {
return 'medium'
} else if( color > 20 && color < 40){
return 'high'
} else {
return 'veryHigh'
}
}
if (color < 12) {
return 'veryLow'
} else if( color > 12 && color < 15) {
return 'low'
} else if( color > 15 && color < 18) {
return 'medium'
} else if( color > 18 && color < 24){
return 'high'
} else {
return 'veryHigh'
}
}
let customLables= {};
for (let item in mapdata) {
let cur = mapdata[item];
customLables[item] = item + ' ' + cur.percent + '%'
}
let USMap = new Datamap( {
scope: 'usa',
element: document.getElementById('map_election'),
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
let text = '<div class="hoverinfo">' + geography.properties.name ;
if (data && (data.percent > -1)) {
text += ':' + data.percent
}
text += '</div>';
return text;
},
highlightBorderWidth: 3
},
fills: {
'veryLow': '#24693D',
'low':'#5DA656',
'medium': '#CED7C3',
'high': '#F16051',
'veryHigh':'#AE123A',
defaultFill: '#FDD0A2'
},
data: Object.assign({}, mapdata),
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
if (selectedState !== geography.id){
detail(geography.id, geography.properties.name);
}
});
document.getElementById('mySelect').addEventListener('change', (evt) => {
let isTotal = document.getElementById('mySelect2').value !== 'percent';
if(evt.target.value === 'choropleth') {
showChloropleth(isTotal);
} else {
showBubble(isTotal);
}
});
document.getElementById('mySelect2').addEventListener('change', (evt) => {
let isTotal = evt.target.value !== 'percent';
let val = document.getElementById('mySelect').value;
if(val === 'choropleth') {
showChloropleth(isTotal);
} else {
showBubble(isTotal);
}
});
}
});
function showBubble(total) {
USMap.updateChoropleth(null, {reset: true});
let bombs = [];
if (total) {
let newVals = getPopulation();
for(let i in newVals) {
let cur = newVals[i];
bombs.push({
centered: i,
state: i,
radius: cur.percent,
fillKey: colors(cur.percent, true),
fillOpacity: 0.7
})
}
d3.select('.datamaps-legend').remove();
USMap.legend({
labels: {
'veryLow': '<5L',
'low':'5L-10L',
'medium': '10L-20L',
'high': '20L-40L',
'veryHigh':'>40L',
defaultFill: '#EDDC4E'
},
});
} else {
for(let i in mapdata) {
let cur = mapdata[i];
bombs.push({
centered: i,
state: i,
radius: cur.percent,
fillKey: colors(cur.percent),
fillOpacity: 0.7
})
}
d3.select('.datamaps-legend').remove();
USMap.legend({
labels: {
'veryLow': '<12%',
'low':'12%-15%',
'medium': '15%-18%',
'high': '18%-24%',
'veryHigh':'>24%',
defaultFill: '#EDDC4E'
},
});
}
USMap.bubbles(bombs, {
popupTemplate: function (geo, data) {
return ['<div class="hoverinfo">' + data.state + ':' + data.radius,
'</div>'].join('');
}
});
}
function getPopulation() {
let vals = [];
for(let i in mapdata) {
vals.push(mapdata[i].result)
}
let newVals = {};
for(let i in mapdata) {
let cur = mapdata[i];
newVals[i] = {
"percent": Math.round(cur.result/100000)
};
newVals[i].fillKey = colors(newVals[i].percent, true);
}
return newVals;
}
function showChloropleth(total) {
USMap.bubbles([]);
if (total) {
let newVals = getPopulation();
USMap.updateChoropleth(Object.assign({}, newVals), {reset: true});
d3.select('.datamaps-legend').remove();
USMap.legend({
labels: {
'veryLow': '<5L',
'low':'5L-10L',
'medium': '10L-20L',
'high': '20L-40L',
'veryHigh':'>40L',
defaultFill: '#EDDC4E'
},
});
} else {
USMap.updateChoropleth(Object.assign({}, mapdata), {reset: true});
d3.select('.datamaps-legend').remove();
USMap.legend({
labels: {
'veryLow': '<12%',
'low':'12%-15%',
'medium': '15%-18%',
'high': '18%-24%',
'veryHigh':'>24%',
defaultFill: '#EDDC4E'
},
});
}
}
USMap.labels();
USMap.legend({
labels: {
'veryLow': '<12%',
'low':'12%-15%',
'medium': '15%-18%',
'high': '18%-24%',
'veryHigh':'>24%',
defaultFill: '#EDDC4E'
},
});
}
mapChart();