Skip to content

Commit 3dfe655

Browse files
AlvinFokAlvinFok
committed
Add title for map chart
1 parent 93d75a4 commit 3dfe655

File tree

1 file changed

+71
-31
lines changed

1 file changed

+71
-31
lines changed

‎index.html

+71-31
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
<!-- Load plotly.js into the DOM -->
88
<script src="https://cdn.plot.ly/plotly-2.16.1.min.js"></script>
99

10-
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
11-
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
10+
<script
11+
src="https://code.jquery.com/jquery-3.6.3.min.js"
12+
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
13+
crossorigin="anonymous"
14+
></script>
1215

1316
<body>
1417
<label>Election Type:</label>
@@ -86,8 +89,9 @@
8689

8790
function findWinner(cityData) {
8891
//rtype: winner party name
89-
var items = cityData.map(function (i) {//map to ["親民黨", "4.34"]
90-
return [i["candidate_party"], i['ticket_percentage']];
92+
var items = cityData.map(function (i) {
93+
//map to ["親民黨", "4.34"]
94+
return [i["candidate_party"], i["ticket_percentage"]];
9195
});
9296
items.sort(function (a, b) {
9397
return +b[1] - +a[1];
@@ -110,47 +114,71 @@
110114
}
111115
}
112116

113-
114117
async function plotWinnerMap(title, dataByCity, candidateData) {
115118
let geoJson = await d3.json("Taiwan_geo.json");
116119
let cities = Array.from(new Set(d3.map(dataByCity, (d) => d.city)));
117120
let candidateInfo = {};
118121
//compatible with president and legialator-at-large
119-
let candidates = !candidateData.columns.includes("candidate") ? Array.from(new Set(candidateData.map(d => [d["candidate_party"], d["candidate_party"]]))) : Array.from(new Set(candidateData.map(d => [d["candidate"], d["candidate_party"]])));
122+
let candidates = !candidateData.columns.includes("candidate")
123+
? Array.from(
124+
new Set(
125+
candidateData.map((d) => [
126+
d["candidate_party"],
127+
d["candidate_party"],
128+
])
129+
)
130+
)
131+
: Array.from(
132+
new Set(
133+
candidateData.map((d) => [d["candidate"], d["candidate_party"]])
134+
)
135+
);
120136
for (let c of candidates) {
121-
candidateInfo[c[0]] = { "party": c[1], "color": partyColor(c[1]), "winZone": { "type": "FeatureCollection", "features": [] } };
137+
candidateInfo[c[0]] = {
138+
party: c[1],
139+
color: partyColor(c[1]),
140+
winZone: { type: "FeatureCollection", features: [] },
141+
};
122142
}
123143

124144
for (let i = 0; i < dataByCity.length; i += candidates.length) {
125145
var cityData = dataByCity.slice(i, i + candidates.length);
126-
var cityName = cityData[0].city
146+
var cityName = cityData[0].city;
127147
var winnerParty = findWinner(cityData);
128-
var winner = Object.keys(candidateInfo).find((key) => candidateInfo[key]["party"] == winnerParty);
148+
var winner = Object.keys(candidateInfo).find(
149+
(key) => candidateInfo[key]["party"] == winnerParty
150+
);
129151
var cityGeometry = getGeometry(geoJson, cityName);
130-
candidateInfo[winner]["winZone"]['features'].push(cityGeometry);
152+
candidateInfo[winner]["winZone"]["features"].push(cityGeometry);
131153
}
132154

133-
var layers = []
155+
var layers = [];
134156
for (let candidate in candidateInfo) {
135157
var layer = {
136158
sourcetype: "geojson",
137159
source: candidateInfo[candidate]["winZone"],
138160
type: "fill",
139-
color: candidateInfo[candidate]['color'],
140-
}
141-
layers.push(layer)
161+
color: candidateInfo[candidate]["color"],
162+
};
163+
layers.push(layer);
142164
}
143165

144166
var layout = {
145167
mapbox: {
146168
center: { lon: 121, lat: 23.5 },
147169
zoom: 6,
148170
style: "light",
149-
layers: layers
171+
layers: layers,
150172
},
151173
width: 800,
152174
height: 800,
153-
title: title
175+
title: title,
176+
colorway: [
177+
"#f3cec9",
178+
"#e7a4b6",
179+
"#cd7eaf",
180+
181+
],
154182
};
155183

156184
var config = {
@@ -159,33 +187,40 @@
159187
};
160188

161189
//todo: draw legeng in map ?
162-
Plotly.newPlot("map", [
163-
{
164-
type: "scattermapbox",
165-
lat: [46],
166-
lon: [-74],
167-
},
168-
], layout, config);
190+
Plotly.newPlot(
191+
"map",
192+
[
193+
{
194+
type: "scattermapbox",
195+
lat: [46],
196+
lon: [-74],
197+
},
198+
],
199+
layout,
200+
config
201+
);
169202
}
170203
</script>
171204

172205
<script>
173206
$("#electionType").on("change", function (e) {
174-
let electionType = document.getElementById("electionType").value
207+
let electionType = document.getElementById("electionType").value;
175208
let selectedFiles = files[electionType];
176209
let year = +document.getElementById("year").value;
177210
//redraw here ...
178211
if (electionType == "president") presidentPlot(selectedFiles, year);
179-
if (electionType == "legislator-at-large") legislatoratlargePlot(selectedFiles, year);
212+
if (electionType == "legislator-at-large")
213+
legislatoratlargePlot(selectedFiles, year);
180214
// other election type ...
181215
});
182216
$("#year").on("change", function (e) {
183-
let electionType = document.getElementById("electionType").value
217+
let electionType = document.getElementById("electionType").value;
184218
let selectedFiles = files[electionType];
185219
let year = +document.getElementById("year").value;
186220
//redraw here ...
187221
if (electionType == "president") presidentPlot(selectedFiles, year);
188-
if (electionType == "legislator-at-large") legislatoratlargePlot(selectedFiles, year);
222+
if (electionType == "legislator-at-large")
223+
legislatoratlargePlot(selectedFiles, year);
189224
// other election type ...
190225
});
191226

@@ -195,17 +230,22 @@
195230
let dataByCity = await d3.csv(files[year].by_city);
196231
let candidateData = await d3.csv(files[year].candidate);
197232
//draw winner map
198-
plotWinnerMap('2020', dataByCity, candidateData);
233+
let title =
234+
"Majorities in Taiwan cities of the " + year + " presidential election";
235+
plotWinnerMap(title, dataByCity, candidateData);
199236
}
200237

201238
async function legislatoratlargePlot(files, year) {
202-
console.log("hi")
203239
let dataByNation = await d3.csv(files[year].by_nation);
204240
let dataByCity = await d3.csv(files[year].by_city);
205241
let candidateData = await d3.csv(files[year].candidate);
206242
//draw winner map
207-
plotWinnerMap('2020', dataByCity, candidateData);
243+
let title =
244+
"Majorities in Taiwan cities of the " +
245+
year +
246+
" legislator at large election";
247+
plotWinnerMap(title, dataByCity, candidateData);
208248
}
209249

210250
presidentPlot(files["president"], 2016);
211-
</script>
251+
</script>

0 commit comments

Comments
 (0)