Deleted old website
This commit is contained in:
1 parent
9e386e8f65
commit
e0b0ca48f2
3 files changed
-109
No files matched your search
@@ -1,51 +0,0 @@
|
||||
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());
|
||||
@@ -1,35 +0,0 @@
|
||||
import leaflet from "https://esm.sh/leaflet@1.9.4";
|
||||
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),
|
||||
};
|
||||
}
|
||||
|
||||
function getCenter(data) {
|
||||
if (!data) {
|
||||
return [51.505, -0.09]; // london
|
||||
}
|
||||
return data[0].points[0];
|
||||
}
|
||||
|
||||
function addRoad(road, map) {
|
||||
leaflet.polyline(road.points).addTo(map);
|
||||
}
|
||||
|
||||
function addRoads(roads, map) {
|
||||
for (const road of roads) {
|
||||
addRoad(road, map);
|
||||
}
|
||||
}
|
||||
|
||||
const roads = await d3.csv("./data/montreal.csv", convertCsvRow);
|
||||
|
||||
const map = leaflet.map("leaflet-map").setView(getCenter(roads), 13);
|
||||
|
||||
leaflet
|
||||
.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19 })
|
||||
.addTo(map);
|
||||
addRoads(roads, map);
|
||||
@@ -1,23 +0,0 @@
|
||||
<!doctype html>
|
||||
<html style="background-color: black">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>spacial-data-experiments</title>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body style="width: 100%; text-align: center">
|
||||
<div id="container" style="background-color: white"></div>
|
||||
|
||||
<div id="leaflet-map" style="height: 1200px; width: 1200px"></div>
|
||||
|
||||
<!-- <script type="module" src="index-d3.js"></script> -->
|
||||
<script type="module" src="index-leaflet.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user