added data

static/index.js

@@ -0,0 +1,43 @@
+import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
+
+import * as topojson from "https://cdn.jsdelivr.net/npm/topojson@3/+esm";
+
+const roadUrl = './road.json';
+const road = await (await fetch(roadUrl)).json()
+
+const projection = d3.geoConicConformal()
+                      .scale(12000)
+                      .center([-72.949, 46.879])
+
+
+
+function drawRoads(context, data) {
+  if(!data || data.length < 1){
+    return context;
+  }
+  context.moveTo(...projection([data[0].lon, data[0].lat]));
+  for(const datum of data){
+    context.lineTo(...projection([datum.lon, datum.lat]));
+  }
+  return context;
+}
+
+const svg = d3.create("svg")
+    .attr("width", 975)
+    .attr("height", 610)
+    .attr("viewBox", [0, 0, 975, 610])
+    .attr("style", "max-width: 100%; height: auto;");
+
+svg.append("g")
+    .attr("transform", "translate(610,20)")
+    .append('text').text("fuck me");
+
+svg.append("path")
+    .data([road])
+    .attr("fill", "none")
+    .attr("stroke", "black")
+    .attr("stroke-linejoin", "round")
+    .attr("stroke-with", 2)
+    .attr("d", d => drawRoads(d3.path(), d).toString());
+
+container.append(svg.node());