winning party proportion

Author: AlvinFok

Taiwan_geo.json

@@ -22,6 +22,9 @@
 	</select>
 	<!-- Create a div where the graph will take place -->
 	<div id="map"></div>
+	<div id="myDiv"></div>
+
+    
 </body>
 
 <script>
@@ -73,16 +76,143 @@
 
 <!-- Choropleth Map -->
 <script>
-	var data = [{
-    type: "choroplethmapbox", locations: ['臺北市'], z: [-50],
-    geojson: "Taiwan_geo.json"
-    }];
+	function getGeometry(json, cityName) {
+		//rtype: polygon of zone
+		for (var i = 0; i < json["features"].length; i++) {
+			if (json["features"][i]["id"] == cityName) {
+				return json["features"][i];
+			}
+		}
+	}
+
+	function findWinner(cityData) {
+		//rtype: winner party name
+		var items = cityData.map(function (i) {//map to ["親民黨", "4.34"]
+			return [i["candidate_party"], i['ticket_percentage']];
+		});
+		items.sort(function (a, b) {
+			return +b[1] - +a[1];
+		});
+		
+		return items[0][0];
+	}
+
+	d3.json("Taiwan_geo.json").then((geoJson)=>{
+		//read taiwan geometry data
+        var json = geoJson
+		d3.csv("/dataset/voteData/cleaned/president/2020/by_city.csv").then(
+			(csvData) => {
+				cities = Array.from(new Set(d3.map(csvData, (d) => d.city))); //use set to get unique city name and convert to array
+				// var data = [{
+				// type: "choroplethmapbox", locations: [cities[0]], z: [-50],
+				// geojson: "Taiwan_geo.json"
+				// }];
+				var partyInfo = {
+					"親民黨": { "color": "rgba(227, 104, 47, 0.8)", "winZone": {"type": "FeatureCollection","features":[]} },
+					"中國國民黨": { "color": "rgba(9, 0, 136, 0.8)", "winZone": {"type": "FeatureCollection","features":[]} },
+					"民主進步黨": { "color": "rgba(64,145,39, 0.8)", "winZone": {"type": "FeatureCollection","features":[]} },
+				};
+
+				for (var i = 0; i < csvData.length; i += 3) {
+					var cityData = csvData.slice(i, i + 3);
+                    var cityName = cityData[0].city
+					var winner = findWinner(cityData);
+                    var cityGeometry = getGeometry(geoJson, cityName)
+                    partyInfo[winner]["winZone"]['features'].push(cityGeometry)
+				}
+                var layers = []
+                for(var party in partyInfo){
+                    var layer = {
+										sourcetype: "geojson",
+										source: partyInfo[party]["winZone"],
+										type: "fill",
+										color: partyInfo[party]['color'],
+									}
+                    layers.push(layer)
+                }
+                console.log(layers[1])
 
-    var layout = {mapbox: {center: {lon: 121, lat: 23.5}, zoom: 7},
-                width: 1000, height:1000};
 
-    var config = {mapboxAccessToken: "pk.eyJ1IjoiYTA1MTI4IiwiYSI6ImNsY2JybmJyYTIyZzEzb2w3dGl3cXpkdXYifQ.aIV8apormocbhm8GpqbySg"};
+				var layout = {
+					mapbox: { 
+                        center: { lon: 121, lat: 23.5 }, 
+                        zoom: 7,
+                        style: "light",
+                        layers:layers 
+                    },
+					width: 1000,
+					height: 1000,
+                    title: '2020'
+				};
 
-    Plotly.newPlot('map', data, layout, config);
+				var config = {
+					mapboxAccessToken:
+						"pk.eyJ1IjoiYTA1MTI4IiwiYSI6ImNsY2JybmJyYTIyZzEzb2w3dGl3cXpkdXYifQ.aIV8apormocbhm8GpqbySg",
+				};
+
+				Plotly.newPlot("map", [
+							{
+								type: "scattermapbox",
+								lat: [46],
+								lon: [-74],
+							},
+						], layout, config);
+			}
+		);
+	});
 </script>
 
+<script>
+	d3.json(
+		"https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json",
+		function (redjson) {
+			d3.json(
+				"https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json",
+				function (bluejson) {
+
+                    console.log(bluejson)
+					Plotly.newPlot(
+						"myDiv",
+						[
+							{
+								type: "scattermapbox",
+								lat: [46],
+								lon: [-74],
+							},
+						],
+						{
+							title: "Florida Counties",
+							height: 600,
+							width: 600,
+							mapbox: {
+								center: {
+									lat: 28,
+									lon: -84,
+								},
+								style: "light",
+								zoom: 4.8,
+								layers: [
+									{
+										sourcetype: "geojson",
+										source: redjson,
+										type: "fill",
+										color: "rgba(163,22,19,0.8)",
+									},
+									{
+										sourcetype: "geojson",
+										source: bluejson,
+										type: "fill",
+										color: "rgba(40,0,113,0.8)",
+									},
+								],
+							},
+						},
+						{
+							mapboxAccessToken: "your access token",
+						}
+					);
+				}
+			);
+		}
+	);
+</script>