44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
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());
|