Going straight ahead!

static/index-d3.js

@@ -0,0 +1,51 @@
+import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
+
+function convertCsvRow(row) {
+  return {
+    relation_id: +row.relation_id,
+    points: JSON.parse(row.points),
+  };
+}
+
+const roads = await d3.csv("./data/pincourt.csv", convertCsvRow);
+
+const projection = d3
+  .geoConicConformal()
+  .scale(100000)
+  .center([-73.983028645966, 45.37425995800737]);
+
+function drawRoad(context, road) {
+  if (!road || !road.points || road.points.length < 1) {
+    return context;
+  }
+  context.moveTo(...projection([road.points[0][0], road.points[0][1]]));
+  for (const datum of road.points) {
+    context.lineTo(...projection([datum[0], datum[1]]));
+  }
+  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("Some title");
+
+svg
+  .selectAll("path")
+  .data(roads)
+  .join("path")
+  .attr("fill", "none")
+  .attr("stroke", "black")
+  .attr("stroke-linejoin", "round")
+  .attr("stroke-with", 2)
+  .attr("d", (road) => drawRoad(d3.path(), road).toString());
+
+container.append(svg.node());