Published
Edited
May 6, 2021
Importers
11 stars
DruidJS workerNatural breaksWord Tour: 40k words and their friendsHead/tail breaksHello, kmeans-engineHello, jsgeoda!n-dimensions binning?Ternary binningHello, Reorder.jsGeometric MedianUMAP SleepwalkDisc TransportSelf-Organizing Maps meet DelaunayHello, AutoencoderCumulative binningPlateau detectionFrida Kahlo’s paletteMean shift clustering with flatbushMean shift clusteringMean shift clustering with kd-treeManhattan Voronoi IIH3 odditiesProtein MatrixUMAP-o-MaticUMAP in A-FrameUMAP of temperatures in Minneapolis/Saint-PaulUMAP Simple TopologiesUMAP & a personalized distance functiont-SNE VoronoiTravelling salesperson approximation with t-SNEtsne.js & workertsne.jsHello tfjs-tsneTravelling salesperson approximation on the globe, with UMAP-jsUMAP-js, worker versionHello UMAP (via Algorithmia)MNIST & UMAP-jsHello UMAP-js
Spherical smallest-circle problem
Also listed in…
Geo
projection = show_stereo ? stereo : d3.geoOrthographic().rotate([0, -15])
centroid = d3.geoCentroid({ type: "MultiPoint", coordinates: points })
stereo = d3.geoStereographic().rotate(centroid.map(d => -d))
stereoCircles = points =>
points.map(d => {
const g = d3
.geoCircle()
.center(d)
.radius((d[2] || 0) + .2)().coordinates[0],
f = [g[0], g[20], g[40]].map(stereo), // sample 3 of the 60 points given by geoCircle
c = circumcenter(f);
return {
x: c[0],
y: c[1],
r: Math.hypot(c[0] - f[0][0], c[1] - f[0][1])
};
})
// inspect
stereoCircles(points)
enclose = points => {
const centroid = d3.geoCentroid({ type: "MultiPoint", coordinates: points });
stereo.rotate(centroid.map(d => -d));
const { x, y, r } = d3.packEnclose(stereoCircles(points));
// the center of the spherical circle can be retrieved with a geoVoronoi of 3 of its points
const f = [[x + r, y], [x - r, y], [x, y + r]].map(stereo.invert),
c = d3.geoVoronoi(f).triangles().features[0].properties.circumcenter;
// for very large lists, c can be on the opposite side, check for that…
if (d3.geoDistance(c, centroid) > Math.PI / 2) {
c[0] += 180;
c[1] *= -1;
}
return { c, r: (d3.geoDistance(c, f[0]) * 180) / Math.PI };
}
// inspect
circle = enclose(points)
height = 500
points = Array.from({ length: N }, () => [
360 * Math.random(),
90 - S * Math.random(),
R * Math.random()
])
function distance2(A, B) {
return (A[0] - B[0])*(A[0] - B[0])+(A[1] - B[1])*(A[1] - B[1]);
}
circumcenter = ([A, B, C]) => {
const a2 = distance2(B, C),
b2 = distance2(C, A),
c2 = distance2(A, B),
// barycentric weights
a = a2 * (b2 + c2 - a2),
b = b2 * (a2 + c2 - b2),
c = c2 * (b2 + a2 - c2),
d = a + b + c;
return [
(A[0] * a + B[0] * b + C[0] * c) / d,
(A[1] * a + B[1] * b + C[1] * c) / d
];
}
d3 = require("d3@5", "d3-geo-voronoi")
import { checkbox, slider } from "@jashkenas/inputs"
import { drag } from "@fil/versor-dragging-with-attitude"
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.
