Maps — and other representations of the world.
druid = require("@saehrimnir/druidjs@0.3.16")
districts = new Set(flows.map((d) => d.CODEi))
matrix = {
const index = d3.index(
flows,
(d) => d.CODEi,
(d) => d.CODEj
);
return Array.from(districts, (i) =>
Array.from(districts, (j) => index.get(i).get(j).Fij)
);
}
positions = {
const X = druid.Matrix.from(matrix); // X is the data as object of the Matrix class.
return new druid["UMAP"](X, 10, 1, 1, 2).transform()._data;
}
X = positions.filter((_, i) => i % 2 === 0)
Y = positions.filter((_, i) => i % 2 === 1)
Plot.dot(districts, { x: X, y: Y, fill: his, r: 7 }).plot({
x: { label: "← first UMAP dimension", reverse: true, axis: "top" },
y: { label: "↓ second UMAP dimension", reverse: true, axis: "right" },
color: { scheme: "tableau10" }
})
simple = import("simple-statistics@7")
positions1 = {
const X = druid.Matrix.from(matrix); // X is the data as object of the Matrix class.
return new druid["UMAP"](X, 5, 1, 1, 1).transform()._data;
}
thresholds = simple
.ckmeans(positions1, 3)
.slice(1)
.map((g) => d3.min(g))
clusters = Array.from(positions1, (d) =>
d < thresholds[0]
? "cluster A"
: d < thresholds[1]
? "cluster B"
: "cluster C"
)
clustMap = Plot.dot(districts, { x: X, y: Y, fill: clusters, r: 7 }).plot({
x: { label: "← first UMAP dimension", reverse: true, axis: "top" },
y: { label: "↓ second UMAP dimension", reverse: true, axis: "right" },
color: { scheme: "category10" }
})
classColor = {
const { domain, range } = clustMap.scale("color");
const a = d3.scaleOrdinal(domain, range);
return (i) => a(clusters[i]);
}
umapColor1 = {
const c = d3.scaleSequential([-2, 5], d3.interpolateWarm);
return (i) => c(positions1[i]);
}
map(umapColor1)
umapColor2 = {
const k = 80;
return (i) => d3.lab(40, k * (X[i] + 2 * Y[i]), k * (X[i] - Y[i]));
}
map(umapColor2)
land = FileAttachment("land.json").json()
points = FileAttachment("coordinates.csv")
.csv()
.then(
(data) =>
new Map(
data.map(({ X_dd: lat, Y_dd: lon, CODE114: code }) => [
code,
[+lon, +lat]
])
)
)
projection = d3.geoMercator().fitExtent(
[
[20, 30],
[width - 20, width * 0.45 - 30]
],
land
)
legend = ({ domain, range }) => Swatches(d3.scaleOrdinal(domain, range))
import { Swatches } from "@d3/color-legend"
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.
