Word Tour: 40k words and their friendsHello, orbHello, cosmograph3D graph on a sphereFour-color world map with ClingoUnconnected Delaunay NeighborsColorized Manhattan Spanning TreeShortest pathDijkstra’s algorithm in gpu.jsLloyd’s relaxation on a graphManhattan DiameterManhattan VoronoiGraph VoronoiMobility landscapes — an introductionDijkstra’s shortest-path treeWorld Cities UrquhartProtein MatrixConvex Spectral WeightsDelaunay.findTriangleForce Simulation Web WorkerSave a Force-Directed Graph to localStorageHello BiofabricTravelling with a self-organizing mapLevenshtein transitionngraph: pagerank, louvain…
Manhattan Voronoi II
ethereal = ethereal_hexbin(radius)
function ethereal_hexbin(radius) {
const hex = d3
.hexbin()
.radius(radius)
.size([width, height]);
return hex(pts.concat(hex.centers()))
.filter(d => d.length === 1)
.map(d => [d.x, d.y]);
}
function map(anchor) {
const context = DOM.context2d(width, height),
path = d3.geoPath().context(context);
// underlying graph
context.beginPath();
for (let k = 0; k < graph.sources.length; k++) {
const i = graph.sources[k],
j = graph.targets[k];
if (i < j) {
context.moveTo(...pts[i]);
context.lineTo(...pts[j]);
}
}
context.strokeStyle = "#ccc";
context.lineWidth = 1;
context.stroke();
for (let i = 0; i < origins.length; i++) {
const c = d3
.tricontour()
.value((d, j) => (tree.origin[j] === origins[i] ? 1 : 0))
.contour(pts.concat(anchor.includes("use") ? ethereal : []), 0.5);
context.beginPath();
path(c);
context.globalAlpha = 0.2;
context.strokeStyle = context.fillStyle = color(origins[i]);
context.fill();
context.globalAlpha = 1;
}
if (anchor.includes("show")) {
context.beginPath();
path.pointRadius(1);
path({ type: "MultiPoint", coordinates: ethereal });
context.fillStyle = "#888";
context.fill();
}
// the trees
context.lineWidth = 2;
for (const k of origins) {
context.beginPath();
context.strokeStyle = color(k);
for (let i = 0; i < pts.length; i++) {
const j = tree.predecessor[i];
if (j > -1 && tree.origin[j] === k) {
context.moveTo(...pts[i]);
context.lineTo(...pts[j]);
}
}
context.stroke();
}
path.pointRadius(6);
for (const k of origins.filter(i => i < pts.length)) {
context.beginPath();
path({
type: "Point",
coordinates: pts[k]
});
context.fillStyle = color(k);
context.strokeStyle = "white";
context.fill();
context.stroke();
}
return context.canvas;
}
origins = Array.from({ length }, () => (Math.random() * nodes.length) | 0)
src = "https://gist.githubusercontent.com/Fil/450db51a15fdc8bd34a12cb8a9961976/raw/680961da57d2b11a0e3e6993e5f79bd035729831"
nodes = d3.csv(`${src}/node_list.csv`, d3.autoType)
edges = d3.csv(`${src}/edge_list.csv`, d3.autoType)
nodesIndex = new Map(nodes.map((d, i) => [d.osmid, i]))
function createGraph(nodesIndex, edges) {
const graph = { sources: [], targets: [], costs: [] };
edges.forEach(({ u, v, length }) => {
const i = nodesIndex.get(u),
j = nodesIndex.get(v),
cost = length;
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;
}
graph = createGraph(nodesIndex, edges)
import { shortest_tree } from "@fil/dijkstra"
tree = shortest_tree({ graph, origins })
pts = nodes.map(d => projection([d.x, d.y]))
projection = d3.geoMercator().fitExtent([[10, 10], [width - 10, height - 10]], {
type: "MultiPoint",
coordinates: nodes.map(d => [d.x, d.y])
})
color = d3.scaleOrdinal(d3.schemeCategory10)
d3 = require("d3@5", "d3-tricontour@1", "d3-hexbin@0.2")
import { checkbox, slider } from "@jashkenas/inputs"
height = width * 0.9
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.
