Skip to content

Commit 12823df

Browse files
joejoe2joejoe2
committed
compatible with legislator-at-large
1 parent 66438c9 commit 12823df

File tree

1 file changed

+101
-123
lines changed

1 file changed

+101
-123
lines changed

‎index.html

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

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>
10+
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
11+
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
1512

1613
<body>
1714
<label>Election Type:</label>
@@ -23,8 +20,6 @@
2320
<!-- Create a div where the graph will take place -->
2421
<div id="map"></div>
2522
<div id="myDiv"></div>
26-
27-
2823
</body>
2924

3025
<script>
@@ -93,126 +88,109 @@
9388
items.sort(function (a, b) {
9489
return +b[1] - +a[1];
9590
});
96-
91+
9792
return items[0][0];
9893
}
9994

100-
d3.json("Taiwan_geo.json").then((geoJson)=>{
101-
//read taiwan geometry data
102-
var json = geoJson
103-
d3.csv("/dataset/voteData/cleaned/president/2020/by_city.csv").then(
104-
(csvData) => {
105-
cities = Array.from(new Set(d3.map(csvData, (d) => d.city))); //use set to get unique city name and convert to array
106-
// var data = [{
107-
// type: "choroplethmapbox", locations: [cities[0]], z: [-50],
108-
// geojson: "Taiwan_geo.json"
109-
// }];
110-
var partyInfo = {
111-
"親民黨": { "color": "rgba(227, 104, 47, 0.8)", "winZone": {"type": "FeatureCollection","features":[]} },
112-
"中國國民黨": { "color": "rgba(9, 0, 136, 0.8)", "winZone": {"type": "FeatureCollection","features":[]} },
113-
"民主進步黨": { "color": "rgba(64,145,39, 0.8)", "winZone": {"type": "FeatureCollection","features":[]} },
114-
};
115-
116-
for (var i = 0; i < csvData.length; i += 3) {
117-
var cityData = csvData.slice(i, i + 3);
118-
var cityName = cityData[0].city
119-
var winner = findWinner(cityData);
120-
var cityGeometry = getGeometry(geoJson, cityName)
121-
partyInfo[winner]["winZone"]['features'].push(cityGeometry)
122-
}
123-
var layers = []
124-
for(var party in partyInfo){
125-
var layer = {
126-
sourcetype: "geojson",
127-
source: partyInfo[party]["winZone"],
128-
type: "fill",
129-
color: partyInfo[party]['color'],
130-
}
131-
layers.push(layer)
132-
}
133-
console.log(layers[1])
134-
135-
136-
var layout = {
137-
mapbox: {
138-
center: { lon: 121, lat: 23.5 },
139-
zoom: 7,
140-
style: "light",
141-
layers:layers
142-
},
143-
width: 1000,
144-
height: 1000,
145-
title: '2020'
146-
};
147-
148-
var config = {
149-
mapboxAccessToken:
150-
"pk.eyJ1IjoiYTA1MTI4IiwiYSI6ImNsY2JybmJyYTIyZzEzb2w3dGl3cXpkdXYifQ.aIV8apormocbhm8GpqbySg",
151-
};
152-
153-
Plotly.newPlot("map", [
154-
{
155-
type: "scattermapbox",
156-
lat: [46],
157-
lon: [-74],
158-
},
159-
], layout, config);
95+
function partyColor(party) {
96+
switch (party) {
97+
case "親民黨":
98+
return "rgba(227, 104, 47, 0.8)";
99+
case "中國國民黨":
100+
return "rgba(9, 0, 136, 0.8)";
101+
case "民主進步黨":
102+
return "rgba(64,145,39, 0.8)";
103+
default:
104+
//todo: hash party name to rgba
105+
return "rgba(0, 0, 0, 0)";
106+
}
107+
}
108+
109+
110+
async function plotWinnerMap(title, dataByCity, candidateData) {
111+
let geoJson = await d3.json("Taiwan_geo.json");
112+
let cities = Array.from(new Set(d3.map(dataByCity, (d) => d.city)));
113+
let candidateInfo = {};
114+
//compatible with president and legialator-at-large
115+
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"]])));
116+
for (let c of candidates) {
117+
candidateInfo[c[0]] = { "party": c[1], "color": partyColor(c[1]), "winZone": { "type": "FeatureCollection", "features": [] } };
118+
}
119+
120+
for (let i = 0; i < dataByCity.length; i += candidates.length) {
121+
var cityData = dataByCity.slice(i, i + candidates.length);
122+
var cityName = cityData[0].city
123+
var winnerParty = findWinner(cityData);
124+
var winner = Object.keys(candidateInfo).find((key) => candidateInfo[key]["party"] == winnerParty);
125+
var cityGeometry = getGeometry(geoJson, cityName);
126+
candidateInfo[winner]["winZone"]['features'].push(cityGeometry);
127+
}
128+
129+
var layers = []
130+
for (let candidate in candidateInfo) {
131+
var layer = {
132+
sourcetype: "geojson",
133+
source: candidateInfo[candidate]["winZone"],
134+
type: "fill",
135+
color: candidateInfo[candidate]['color'],
160136
}
161-
);
162-
});
137+
layers.push(layer)
138+
}
139+
140+
var layout = {
141+
mapbox: {
142+
center: { lon: 121, lat: 23.5 },
143+
zoom: 6,
144+
style: "light",
145+
layers: layers
146+
},
147+
width: 800,
148+
height: 800,
149+
title: title
150+
};
151+
152+
var config = {
153+
mapboxAccessToken:
154+
"pk.eyJ1IjoiYTA1MTI4IiwiYSI6ImNsY2JybmJyYTIyZzEzb2w3dGl3cXpkdXYifQ.aIV8apormocbhm8GpqbySg",
155+
};
156+
157+
//todo: draw legeng in map ?
158+
Plotly.newPlot("map", [
159+
{
160+
type: "scattermapbox",
161+
lat: [46],
162+
lon: [-74],
163+
},
164+
], layout, config);
165+
}
163166
</script>
164167

165168
<script>
166-
d3.json(
167-
"https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json",
168-
function (redjson) {
169-
d3.json(
170-
"https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json",
171-
function (bluejson) {
172-
173-
console.log(bluejson)
174-
Plotly.newPlot(
175-
"myDiv",
176-
[
177-
{
178-
type: "scattermapbox",
179-
lat: [46],
180-
lon: [-74],
181-
},
182-
],
183-
{
184-
title: "Florida Counties",
185-
height: 600,
186-
width: 600,
187-
mapbox: {
188-
center: {
189-
lat: 28,
190-
lon: -84,
191-
},
192-
style: "light",
193-
zoom: 4.8,
194-
layers: [
195-
{
196-
sourcetype: "geojson",
197-
source: redjson,
198-
type: "fill",
199-
color: "rgba(163,22,19,0.8)",
200-
},
201-
{
202-
sourcetype: "geojson",
203-
source: bluejson,
204-
type: "fill",
205-
color: "rgba(40,0,113,0.8)",
206-
},
207-
],
208-
},
209-
},
210-
{
211-
mapboxAccessToken: "your access token",
212-
}
213-
);
214-
}
215-
);
216-
}
217-
);
218-
</script>
169+
$("#electionType").on("change", function (e) {
170+
let selectedFiles = files[e.target.value];
171+
//redraw here ...
172+
if (e.target.value == "president") presidentPlot(selectedFiles);
173+
if (e.target.value == "legislator-at-large") legislatoratlargePlot(selectedFiles);
174+
// other election type ...
175+
});
176+
177+
async function presidentPlot(files) {
178+
//todo: years have 2016 and 2020
179+
let dataBtNation = await d3.csv(files["2016"].by_nation);
180+
let dataByCity = await d3.csv(files["2016"].by_city);
181+
let candidateData = await d3.csv(files["2016"].candidate);
182+
//draw winner map
183+
plotWinnerMap('2020', dataByCity, candidateData);
184+
}
185+
186+
async function legislatoratlargePlot(files) {
187+
//todo: years have 2016 and 2020
188+
let dataBtNation = await d3.csv(files["2016"].by_nation);
189+
let dataByCity = await d3.csv(files["2016"].by_city);
190+
let candidateData = await d3.csv(files["2016"].candidate);
191+
//draw winner map
192+
plotWinnerMap('2020', dataByCity, candidateData);
193+
}
194+
195+
presidentPlot(files["president"]);
196+
</script>

0 commit comments

Comments
 (0)