Interested in data visualisation, maps, JavasScript, and geology
railLine
// Ignore first point because it's in here twice to close the polygon
outerRing = railLine.geometry.coordinates[0]
.slice(1)
.map(applyProjection);
voronoi = {
const [xMin, xMax] = d3.extent(pointsOnPolygon.map(d => d[0]));
const [yMin, yMax] = d3.extent(pointsOnPolygon.map(d => d[1]));
const leftTop = [xMin - 1, yMin - 1];
const rightBottom = [xMax + 1, yMax + 1];
return d3.voronoi().extent([leftTop, rightBottom])(pointsOnPolygon).edges;
}
filteredEdges = voronoi
.filter(edge => {
if (edge && edge.right) {
// array of booleans
const inside = edge.map(point =>
d3.polygonContains(pointsOnPolygon, point)
);
// necessary for corners
if (inside[0] === inside[1]) {
return inside[0]; // boolean
}
// again why?
if (inside[1]) {
edge.reverse();
}
return true;
}
return false;
})
// Clip voronoi edges to polygon
clippedEdges = filteredEdges.map(([start, end] = []) => {
const { intersection, distance } = originalFindClosestPolygonIntersection(
start,
end,
pointsOnPolygon
);
if (intersection) {
intersection.clipped = true;
}
// Each edge has a starting point, a clipped end point, and an original end point
const edge = [start, intersection || end];
edge.distance = intersection ? distance : distanceBetween(start, end);
return edge;
})
nodes = {
const nodes = [];
// loop over clipped voronoi edges
clippedEdges.forEach(edge => {
console.log(edge[0])
// add Nodes of each Edge to Nodes array
edge.forEach((node, i) => {
// if no index or if not is not clipped
// so this is only for innerNodes and first node (0th)
if (!i || !node.clipped) {
// check if node is in nodes array, if so return element
// this is to set same id for wellconnected nodes
const nodeInNodes = nodes.find(d => d === node);
if (nodeInNodes) { // if node is in nodes array
return (node.id = nodeInNodes.id); // set node id equal to one already in nodes array
}
}
node.id = nodes.length.toString();
node.links = {};
nodes.push(node);
});
const startNode = edge[0];
const endNode = edge[1];
console.log(edge[0])
// set links to connected node
startNode.links[endNode.id] = edge.distance;
endNode.links[edge[0].id] = edge.distance;
});
return nodes;
}
graph = {
const graph = new Graph();
nodes.forEach(node => graph.addNode(node.id, node.links));
return graph;
}
innerNodes = nodes.filter(d => !d.clipped)
// prefer Nodes with more links over those with just one!
traversal = {
let totalBest;
for (let i = 0; i < perimeterNodes.length; i++) {
const start = perimeterNodes[i];
const longestShortestPath = perimeterNodes.slice(i + 1).reduce((nodeBest, node) => {
const path = graph.path(node.id, start.id, { cost: true });
if (path && (!nodeBest || path.cost > nodeBest.cost)) {
return path;
}
return nodeBest;
}, null);
if (longestShortestPath && longestShortestPath.path) {
longestShortestPath.path = longestShortestPath.path.map(id => nodes[+id]);
// Ignore fitnessFunction for now
if (!totalBest || longestShortestPath.cost > totalBest.cost) {
totalBest = longestShortestPath;
}
yield Promises.delay(+speed, {
bestPath: totalBest.path,
currentPath: longestShortestPath.path
});
}
}
if (totalBest) {
yield {
bestPath: totalBest.path
};
}
}
// ideally, wait until bestPath is finished walking the graph
centerlineTraversalGeo = traversal.bestPath.map(removeProjection)
centerlineTraversalGeoJSON = turf.lineString(centerlineTraversalGeo)
// innerNodesSvgLine = d3.pairs(innerNodes) // for svg line,
// geoPointsCenterline = innerNodes.map(removeProjection)
// centerlineGeoJSON = turf.lineString(geoPointsCenterline)
md`### Reading material
https://smathermather.com/2011/09/16/what-is-the-center-line-of-a-polygon-or-how-to-change-labeling-in-geoserver/
`
railNum
t = projection.translate();
s = projection.scale();
applyProjection = ([x, y]) => [s * x + t[0], s * y + t[1]]
removeProjection = ([x, y]) => [(x - t[0])/s, (y - t[1])/s]
turf = require("@turf/turf@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
