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