Published
Edited
Jan 24, 2022
Importers
28 stars
sqrt3_4 = sqrt(3) / 4
height = width * sqrt3_4
vertices = [
[-25, acos(1 / 3) * .5 * degrees],
[155, acos(1 / 3) * .5 * degrees],
[-115, -acos(1 / 3) * .5 * degrees],
[65, -acos(1 / 3) * .5 * degrees]
]
rotate = [115, acos(1 / 3) * .5 * degrees - 90, 180]
tetrahedralMarkley = () =>
d3.geoProjection(tetrahedralMarkleyRaw)
.preclip(d3.geoClipPolygon(clipPolygon()))
tetrahedralMarkleyRaw = {
const rawLee = d3
.geoTetrahedralLee()
.rotate(rotate)
.fitExtent([[-4, -1.5 / sqrt3_4], [4, 1.5 / sqrt3_4]], {
type: "Sphere"
});
const forward = (l, p) => {
let [x, y] = rawLee([l * degrees, p * degrees]);
if (y < 0) {
x = -x - 4;
if (x < -5) x += 8;
y = -y;
}
if (x > 3) x -= 8;
return [x, -y];
};
// see the diagram for colors
forward.invert = (x, y) => {
const a =
rawLee.invert([x, -y]) || // green
(x > 0 && rawLee.invert([4 - x, y])) || // orange
(x < 0 && rawLee.invert([-4 - x, y])) || // red
(x < 0 && rawLee.invert([8 + x, -y])); // blue
if (a) return [a[0] * radians, a[1] * radians];
};
return forward;
}
clipPolygon = e => {
const raw = tetrahedralMarkleyRaw;
if (e === undefined) e = .001;
const lin = (s, e, n) => d3.range(n).map(i => s + ((e - s) * i) / n);
const x0 = -7 + e;
const x1 = 1 - e;
const y0 = e;
const y1 = 1.5 / sqrt3_4 - e;
const ring = []
.concat(
lin(y0, y1, 38).map(y => [x0, y]),
lin(x0, x1, 9).map(x => [x, y1]),
lin(y1, y0, 38).map(y => [x1, y]),
lin(x1, x0, 9).map(x => [x, y0])
)
.map(d => raw.invert(...d).map(d => d * degrees));
ring.push(ring[0]);
return {
type: "Polygon",
coordinates: [ring]
};
}
import { acos, degrees, radians, sqrt } from "@fil/math"
import { drag } from "@d3/versor-dragging"
import { view } with { url } from "@mbostock/hello-pdf-js-pdfpageview"
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.
