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());