Published
Edited
Jun 22, 2022
49 stars
nodes = poissonDiscSampler(width, height, 12)
distance = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1])
function graph(nodes) {
const graph = { sources: [], targets: [], costs: [] },
n = nodes.length,
delaunay = d3.Delaunay.from(nodes);
delaunay.halfedges.forEach((ei, ej) => {
if (ei > ej) {
const i = delaunay.triangles[ei],
j = delaunay.triangles[ej],
cost = distance(nodes[i], nodes[j]);
graph.sources.push(i);
graph.targets.push(j);
graph.costs.push(cost);
graph.sources.push(j);
graph.targets.push(i);
graph.costs.push(cost);
}
});
return graph;
}
groupColor = d3.scaleOrdinal(d3.schemeDark2.concat(d3.schemePastel2))
centers = origins.map(i => nodes[i])
origins = Array.from({ length: 15 }, () => (Math.random() * nodes.length) | 0)
import {
drag,
draw_starting_points,
draw_connections
} with { origins, graph, height, mutable nodes } from "@fil/mobility-landscapes"
import { poissonDiscSampler } from "@fil/2d-point-distributions"
import { shortest_tree } from "@fil/dijkstra"
height = Math.min(width, 600)
d3 = require("d3@5", "d3-delaunay@6", "d3-tricontour@1")
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.
