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