singapore map

index.html

@@ -22,8 +22,7 @@
 
 	<!-- External JS libraries -->
 	<script src="https://d3js.org/d3.v5.min.js"></script>
-	<script src="http://api.jquery.com/jquery.getjson"></script>
-	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 	<!-- Custom JS -->

js/main.js

@@ -4,32 +4,29 @@ const svg = d3.select("#chart-area").append("svg")
 
 singapore = "../data/NationalMapPolygonKML.geojson"
 
-var handleGeoJSON = function (data) {
-  console.log(data)
-}
+var handleGeoJSON = function (sing) {
+  console.log(sing.features)
 
-// $ = shortcut for jquery
-jQuery.getJSON(singapore, handleGeoJSON)
+  let projection = d3.geoMercator().center([107,0]).scale(5000)
+  var path = d3.geoPath(projection);
+  let geoGenerator = d3.geoPath();
+
+  svg.selectAll('path')
+  .data(sing.features)
+  .enter()
+  .append('path')
+  .attr("fill", "none")
+  .attr("stroke", "green")
+  .attr('d', function (d) { return path(d); });
 
-fetch(guinea).then(function(response) { return response.json() }).then(handleGeoJSON)
+}
 
+// $ = shortcut for jquery
+$.getJSON(singapore, handleGeoJSON)
+fetch(singapore).then(function(response) { return response.json() }).then(handleGeoJSON)
 console.log(singapore)
 
-// Plot.plot({
-//   marks: [
-//     Plot.geo(singaporeMainland, {
-//       fill: (d) => '#FAF8ED',
-//       stroke: (d) => 'black'
-//     }),
-//     Plot.geo(parks, {
-//       fill: (d) => '#748E63',
-//       stroke: (d) => 'black'
-//     })
-//     ]
-// })
-
-svg.append("circle")
-  .attr("cx", 100)
-  .attr("cy", 250)
-  .attr("r", 70)
-  .attr("fill", "green")
+let projection = d3.geoMercator().center([1, 103]).scale(500);
+var path = d3.geoPath(projection);
+let geoGenerator = d3.geoPath();
+

js/maisie-fisher.github.io.code-workspace

@@ -7,5 +7,7 @@
 			"path": "../data"
 		}
 	],
-	"settings": {}
+	"settings": {
+		"liveServer.settings.multiRootWorkspaceName": "maisie-fisher.github.io"
+	}
 }