52 lines
1.2 KiB
JavaScript
52 lines
1.2 KiB
JavaScript
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());
|